Bilder ved link-hover

[Jan Åge]

Sikkert veldig dårlig tittel, men dette er litt vanskelig å forklare.

 

Jeg lurer på om noen vet hvordan jeg kan gjøre slik at ved at noen "hovrer" på linkA så vises bildeA, så når noen "hovrer" på linkB så vises bildeB (der som bildeA var).

 

Et eksempel er gamer.no der ved å hovre på nyhetslinkene så byttes bilde med tekst osv i "Fokus nå".

 

Noen som har noen tips? Evt. linker til script osv...

[Cucum(r)]

http://www.meyerweb.com/eric/css/edge/popups/demo.html

[Lemkin]

gi hver link en klasse som har egen bakgrunnsbilde. Og på a:hover så legger du inn det nye bakgrunnsbildet?

[Jan Åge]

Takk for 2 kjappe gode tips, skal teste dette ut!

[Lungemannen]

En ide er også å gi hver link og div'en/etc. en id. Så kan du mekke litt med css.

 

#linkA{
a:hover: img url("link"): target: bildeplass;
}

 

Noe i den duren. Se over koden over, det er nok en del feil i den, tok det veldig på sparket.

Endret 23. august 2004 av Lungemannen

[Haraldson]

<ul id="menuinclude" class="hiddenlist">
<li><a href="index.php?id=index" class="meny1"><span>Meny 1</span></a></li>
<li><a href="index.php?id=bilder" class="meny2"><span>Meny2</span></a></li>
</ul>

 

ul#menuinclude span {
visibility:hidden;
overflow:hidden;
}


.meny1 {
background:url(../menu/meny1.gif);
}

.meny2 {
background:url(../menu/meny2.gif);
}

#menu a {
height:26px;
width:150px;
display:block;
background-repeat:no-repeat;
text-decoration:none;
}

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

ul.hiddenlist {
margin:0;
}

ul.hiddenlist li {
list-style:none;
float:left;
margin:0;
padding:0;
}

 

Sånn har jeg det på min side. Det er en vertikal meny. Noen reagerer sikkert på bruken av width og height på #menu a, men jeg orker ikke skifte.

[Simon Zimmermann]

Mr.Berg: Hvis jeg ikke tar helt feil her så er det vel unødvendig å bruke class. pga. at du bare bruker meny1,meny2 en gang. Dvs. at det da er fortrukket å bruke id.

 

Mulig at jeg har oversett noe elementært og tar helt feil?!

[Lokaltog]

Mr.Berg: Hvis jeg ikke tar helt feil her så er det vel unødvendig å bruke class. pga. at du bare bruker meny1,meny2 en gang. Dvs. at det da er fortrukket å bruke id.

 

Mulig at jeg har oversett noe elementært og tar helt feil?!

Så vidt jeg vet er det ingen annen forskjell enn at man kan bruke id en gang, og at id fungerer som et anker i dokumentet. Derfor blir det vel mer en smakssak der det står mellom id eller class.

 

Selv bruker jeg id kun når jeg er 100% sikker på at jeg ikke trenger elementet mer enn én gang i et dokument.

[Simon Zimmermann]

Det er vel bare en smaksak.

Leste litt på w3c sine sider for å finne et svar på om det er en annen forskjell på class og id enn at den ene er unik og den andre kan brukes flere ganger, men fant ingenting.

 

Class:

The id selector is different from the class selector! While a class selector may apply to SEVERAL elements on a page, an id selector always applies to only ONE element.

 

Id:

With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph.

[pgdx]

Jeg mener å ha lest at w3c egentlig sier vi kan bruke class til alt, men at ID eksisterer pga, og hold dere fast nå, Microsoft.

 

De har visst brukt ID-taggen tidligere og brukes i JavaScript, uten at jeg kan noe om javascript, men det var visst det.

 

Bruk class, dere. Selv bruker jeg ID på unike elementer.

[Lokaltog]

En stor fordel med ID er jo at du kan bruke egenskapen som et anker i et dokument. Dvs. at du kan referere til en bestemt id ved å føye til #DinId på slutten av adressen, og de fleste nettlesere vil da automatisk scrolle ned til linja der #DinId befinner seg.

 

Derfor kan det heller ikke være mer enn én id i et dokument.

Endret 23. august 2004 av lokaltog

[Cucum(r)]

Lungemannen: Man kan ikke spesifisere target i CSS.

[haugsand]

En stor fordel med ID er jo at du kan bruke egenskapen som et anker i et dokument. Dvs. at du kan referere til en bestemt id ved å føye til #DinId på slutten av adressen, og de fleste nettlesere vil da automatisk scrolle ned til linja der #DinId befinner seg.

 

Derfor kan det heller ikke være mer enn én id i et dokument.

For å legge til litt ekstra informasjon, så kan name-attributten IKKE brukes på a i XHTML 1.1, så ID har kommet for å bli. En av funksjonene er, som sagt tildigere, å identifisere elementer.

Endret 24. august 2004 av satyrium

[Lungemannen]

SirIce: Ja, vet, det gikk litt fort i svingene. Hadde andre ting å gjøre, så det ble hastverksarbeid

[Haraldson]

Syns du skylder på den hver gang, jeg. På tide å sette seg ned med en varm kopp te, og ta livet med ro?

[haugsand]

Jeg synes at folk som ikke er ganske sikre på at det svaret/den koden de avgir er ganske korrekt, kan unnlate å svare. Ellers blir det bare forvirring og vranglære.

[pgdx]

Jeg synes at folk som ikke er ganske sikre på at det svaret/den koden de avgir er ganske korrekt, kan unnlate å svare. Ellers blir det bare forvirring og vranglære.

Det er et diskusjonsforum på nett, for crying out...

 

Hva hadde det vært hvis ikke folk hadde vært påståelige på ting de ikke har greie på?

 

 

Ps: Siktet du til meg?

Syns du skylder på den hver gang, jeg. På tide å sette seg ned med en varm kopp te, og ta livet med ro?

God idé...

[Jan Åge]

Jeg fikk det til slik jeg ville ha det, slik at det vises et standardbilde utenom når noen "hovrer" over de aktuelle linkene. Jeg legger ved hvordan jeg gjorde det i tillfelle noen lurer:

 

stylesheet.css

/* Selve Movies Box'en */
#Movies {
position:absolute;
top:170px;
left:5px;
width:380px;
height:100px; 
border-style:solid;
border-color:#000;
border-width:0px 1px 1px 1px;
background-color:#445161;
padding:5px;
z-index: 100;
}
/* Attibrutter for linker i Movies */	
#Movies a {
text-align: left; 
font-weight: bold; 
font-size:10px;
font-family:verdana, arial, helvetica, sans-serif;
border-width: 0; 
text-decoration: none;
}

/* Attibrutter for linker ved a:hover i Movies */	
#Movies a:hover {
color:#ddd;
font-size: 10px; 
font-weight:bold;
font-family:verdana, arial, helvetica, sans-serif;
background:; 
border-right:;
}
/* Kode for at det vises ingen bilde "default" */
#Movies a img {
height: 0; 
width: 0; 
border-width:0px;
}

/* Attibrutter for bildene som skal vises */
#Movies a:hover img {
position: absolute; 
top: 10px; 
left: 230px; 
height: 90px; 
width: 125px;
border-style:solid;
border-color:#000;
border-width:1px;
z-index: 3;
}
/* Kode for bakgrunnsbilde som skal vises som standard, når ingen linker er i status hover */	
#Bilde  {
position: absolute; 
top: 10px; 
left: 230px; 
height: 90px; 
width: 125px;
border-style:solid;
border-color:#000;
border-width:1px;
background-image:
url("LINK TIL BAKGRUNN");
z-index: 2;
}

 

index.php:

<div id=Movies>
<p><a target=_blank href="mean.html">Mean<img src="mean.gif"></a></p>
<p><a target=_blank href="aleine.html">Aleine<img src="aleine.gif"></a></p>
<p><a target=_blank href="topg.html">Top Gun<img src="topg.gif"></a> - by Masse</p>
<p><a target=_blank href="doom3.html">Doom 3<img src="doom3.gif"></a></p>
<a target=_blank href="jeepfun2k.html">Jeepfun 2k<img src="jeepfun2k.gif"></a>
<div id="Bilde">
</div>
</div>

 

Beklager den lange posten, men det var nødvendig for å få med alt.

Endret 24. august 2004 av Jan Åge

[jorgis]

Jan Åge: Du bør være oppmerksom på at standard kommentar-tag i CSS er /* og */, ikke //. Hvis noen tar i bruk den koden der, vil man få parse errors. Bytt ut // med /* og */.

[haugsand]

Beklager for Off Topic:

 

drange_net: Nei, jeg siktet ikke til deg, jeg vet hva du er godt for

 

Såklart, svar som ikke er helt riktig må vi til en grad godta, men i stedet for å gjette som en helt på en enkelt kode, kan man i stedet undersøke litt, før man poster et svar.