xhtml, strict, onmouseover

[Stian_]

skulle gjerne finne et javascript som bytter bilde når jeg har muspekeren over det. men da trenger jeg en name attributt i <img taggen. og det vil ikke strict ha noe av. noen som har noen forslag til hva jeg kan gjøre? annet enn å bytte til transitional

 

nåværende kode, i body:

<a href="../home/index.html"
    onmouseout="document.home.src='../images/knapper/red_home.gif'"
    onmouseover="document.home.src='../images/knapper/darkRed_home.gif'"
    onclick="document.home.src='../images/knapper/blue_home.gif'">
    <img src="../images/knapper/red_home.gif" alt="Home" name="home" class="KNAPPER" />
  </a>

og nåværende kode i head:

var darkRed_aboutMe = new Image();
darkRed_aboutMe.src = "../images/knapper/darkRed_aboutMe.gif";
var red_aboutMe = new Image();
red_aboutMe.src = "../images/knapper/red_aboutMe.gif";
var blue_aboutMe = new Image();
blue_aboutMe.src = "../images/knapper/blue_aboutMe.gif";

 

problemet er:

name="home" i <img taggen går ikke i strict xhtml. så trenger et javascript som ikke trenger noen attributer i bildet. Jeg har flere bilder som skal bytte. siden min er:

stian.bang.dot.no/hjemmeside/_temp

[oksa]

går det ikke med <img onmouseover="this.src=XX.jpg" src="YY.jpg" /> ?

[Tha_Zaynt]

For det første, hvis du har spørsmål om javascript, spør i javascript-delen av forumet

For det andre, hvorfor bruker du js.. hvorfor ikke bruke CSS?

[Arve Systad]

Eller du bruker CSS Rollovers. Javascript til denslags er tull.

[FuLu]

bytte name med id? Så kan du i javascriptet bruke

id_til_img = document.getElementById("id_til_img");
id_til_img.className = "mousehoveredme"; // for å bytte class på img'et

 

Eller som arve sier

Endret 17. oktober 2004 av FuLu

[Stian_]

For det første, hvis du har spørsmål om javascript, spør i javascript-delen av forumet

For det andre, hvorfor bruker du js.. hvorfor ikke bruke CSS?

kan man gjøre det jeg vil i css? visste jeg ikke

 

spurte her, fordi det er xhtml og javascript.

 

takker for reply's - virker vel snart.

[Zethyr]

Gjør slik som i lenken arve viste deg, hvis du vil gjøre det på en god måte. Allikevel vil det ikke fungere i IE med mindre du legger img-elementet inne i et a-element..

IE støtter bare :hover på a-elementer

[Stian_]

ok, prøvde nå den idee'n til arve - funka fint...nesten.

 

linken sitt bakgrunnsbilde blir lagt under det andre bilde.

 

i CSS:

A.ABOUT_ME:link {
 BACKGROUND-IMAGE: url('../images/knapper/darkRed_aboutMe.gif');
 BACKGROUND-REPEAT: no-repeat;
}
A.ABOUT_ME:visited {
 BACKGROUND-IMAGE: url('../images/knapper/darkRed_aboutMe.gif');
 BACKGROUND-REPEAT: no-repeat;
}
A.ABOUT_ME:hover {
 BACKGROUND-IMAGE: url('../images/knapper/red_aboutMe.gif');
 BACKGROUND-REPEAT: no-repeat;
}
A.ABOUT_ME:active {
 BACKGROUND-IMAGE: url('../images/knapper/red_aboutMe.gif');
 BACKGROUND-REPEAT: no-repeat;
}

html:

<a href="../aboutMe/index.html" class="ABOUT_ME">
<img src="../images/knapper/red_aboutMe.gif" alt="About Me" class="KNAPPER" />
</a>

 

EDIT: se her: http://stian.bang.dot.no/hjemmeside/_temp/

 

EDIT2:

kom på at jeg kan skifte ut bilde med tekst, og lage det på en annen måte.

burde gå, hvis ikke sier jeg ifra.

takker for reply's og hjelpen

Endret 17. oktober 2004 av Thurloc

[Haraldson]

Poenget er at du skal sette bildet som bakgrunnsbilde på a, og ikke ha et bilde i HTML og et i CSS.

 

#menu a {
display:block;
width:180px;
height:20px;
text-indent:-9999px;
font-size:1px;
background-position:top;
}

#menu a:hover {
background-position:bottom;
}

a.blogg {
background:url(../menu/blogg.png) no-repeat;
}

a.skriverier {
background:url(../menu/skriverier.png) no-repeat;
}

a.portefolje {
background:url(../menu/portefolje.png) no-repeat;
}

a.personlig {
background:url(../menu/personlig.png) no-repeat;
}

a.kontakt {
background:url(../menu/kontakt.png) no-repeat;
}

 

<div id="menu">
<ul>
<li><a href="index.php?q=blogg" class="blogg">Blogg</a></li>
<li><a href="index.php?q=skriverier" class="skriverier">Skriverier</a></li>

<li><a href="index.php?q=portefolje" class="portefolje">Portefølje</a></li>
<li><a href="index.php?q=personlig" class="personlig">Personlig</a></li>
<li><a href="index.php?q=kontakt" class="kontakt">Kontakt</a></li>
</ul>
</div>

Endret 17. oktober 2004 av Mr.Berg

[Stian_]

jepp, takker.

[haugsand]

*Pirke pirke*

 

Mr.Berg: Gjerne fjern div-elementet i koden din også. Den er ganske unødvendig, siden du kan tilegne id-en til ul i stedet

[Haraldson]

Bare kopierte rett fra koden til sida mi, og brydde meg ikke så mye om det. En div fra eller til har da uansett ikke noe å si, eller har du, o store mester noen negative sider ved bruk av «overflødige» divs, annet enn at det blir mer kode å laste ned?

[haugsand]

En div fra og til har ikke så mye å si nei, men synes likevel at det er viktig å påpeke at du ikke trenger å bruke div-elementer hele tiden. Jo mindre markup jo bedre

 

CSS-layout handler jo ikke om å bruke mest mulig div, men å bruke strukturisert (X)HTML.