:hover over et bilde endrer et annet?

[-Teddy-]

Jeg vet det har vært tråder om dette her inne før, men jeg klarer ikke å finne de. Derfor spør jeg:

 

Jeg vil at et bilde skal byttes ut når jeg holder pekeren over et annet bilde. Hvordan gjøres dette? Det skal brukes på http://4bikers.no, når man hovrer en tur (f.eks. Route 66) skal turen komme opp i USA-kartet.

 

EDIT: Leif på besøk as usual.

Endret 4. februar 2007 av -Teddy-

[Dustwave]

JavaScript er det desidert letteste.. sjekk www.dynamicdrive.com

[Ståle]

CSS kan også brukes.. Man lager et bilde som er dobbelt så bredt som bildet skal være. Og setter margin-left: -50px;

hvis bildet er 50px.. Men finner ikke siden igjen =/

[Ståle]

edit; åj...

Endret 4. februar 2007 av Ståle

[harald_]

css er vel det letteste?

 

<div id="bilde"></div>

 

#id{
width:150px;
height:150px;
background-image:url(foo/bar.png);
background-position:top;}

#id:hover{
background-postion:bottom;}

 

Utover dette legger du begge bildene inn i samme fil, om du bruker dette eksempelet legger du bildet som vanligvis skal vises øverst, og hover bildet nederst.

Endret 5. februar 2007 av harald_

[Dustwave]

dere missforstår, se for dere dette: dere har to bilder. Et i høyre hjørne og et i venstre hjørne av browseren. Det han ønsker å oppnå er at hvis han tar hover på det høyre bildet så endrer det venstre seg.. altså ikke en tradisjonell mouseover

[-Teddy-]

Neinei, ikke slik.

Når jeg holder musepekeren over bilde A, endres bilde B til noe annet.

Se på 4bikers.no, når jeg holder musepekeren over en av turene skal kartet under endre seg til å vise den aktuelle ruten.

[Vibeke S]

Jeg lånte litt kode fra Mikael Bergs hjemmeside; palmekraft.net da jeg lagde krast.no, hvis du ser på kildekode og css på de sidene (er i menyene det brukes) finner du ut hvordan man gjør det. Ikke noe javascript, bare css.

[Krankemot]

Jeg lurer også på det, en kamerat skal ha samme effekten til en skoleoppgave, kan noen lage en kode til oss som vi bare kan copy/paste?

 

Takk

 

mvh Snorre

[-Teddy-]

Bare bruk en tom span inni en div.

Deretter styler du div:hover span og legger span'en absolutt over det aktuelle bildet. Fungerer ikke uten videre i IE6, jeg vet ikke med 7'ern.

[Krankemot]

Umm, skjønte ikke så mye av det. Kan bare grunnleggende css/html.

 

Trenger desperat hjelp til denne koden. Weblæreren vår er inkompetent

Endret 16. februar 2007 av Snobjorn

[-Teddy-]

Eks:

Du har et bilde i <div id="bilde1"> og et i <div id="bilde2">. Når du holder musepekeren over bilde1 vil du endre bilde2.

 

HTML

<div id="bilde1"><span></span></div>
<div id="bilde2"><span></span></div>

 

CSS:

div span{
display: none;
}

#bilde1 {
background: red; 
position: absolute; 
width: 50px;
height: 50px;
top: 0; 
left: 0;}

#bilde2 {
background: green; 
position: absolute;
width: 50px;
height: 50px;
top: 50; 
left: 0;}

#bilde1:hover span{
background: blue; 
display: block;
position: absolute;
width: 50px;
height: 50px;
top: 50; 
left: 0;}

 

Dette medfører at bilde to blir blått når man holder musepekeren over bilde 1.

EDIT: Med forbehold om kodefeil...

Endret 16. februar 2007 av -Teddy-

[Krankemot]

Takk for svar, men da jeg kopierte inn koden, var det eneste jeg fikk en rød og en grønn firkant, skjedde ikkenoe når jeg holdt musepekeren over noen av de.

 

Når vi vil ha bildene mine istedenfor dine, så bare endrer jeg div med <img> ikke sant? Vi skjønner halveis hvordan det fungerer nå.

Endret 16. februar 2007 av Snobjorn

[Runar]

Et raskt søk på Google ga meg følgende resultat:

 

http://meyerweb.com/eric/css/edge/popups/demo2.html

[...............]

http://wellstyled.com/css-nopreload-rollovers.html

 

her har jeg brukt den på menyen, men funker vel med vanlige bilder?

 

EDIT: eller kanskje ikke, det stod meny der også ja, sorry

Endret 16. februar 2007 av karlsn

[ScratchMyTail]

Jeg ville løst dette problemet med JavaScript. Ganske simpelt.

 

 

Javascript:

<script type="text/javascript">
<!--

function visBilde() {
document.images["Image1"].src="bilde2.jpg";
}

function ikkeVisBilde() {
     document.images["Image1"].src="bilde1.jpg";
}

-->
</script>

2 metoder, en for når du har musa over bildet, og en for når det første bildet skal settes tilbake.

 

Html koden blir da slik:

<a href="#" onMouseOver="visBilde();" onMouseOut="ikkeVisBilde();"><img id="Image1" src="bilde1.jpg" /></a>

 

Hele koden, denne fungerer. Men bildetittlene må selvsagt endres.

<html>
<head>

<script type="text/javascript">
<!--

function visBilde() {
document.images["Image1"].src="bilde2.jpg";
}

function ikkeVisBilde() {
     document.images["Image1"].src="bilde1.jpg";
}

-->
</script>
</head>
<body>

<a href="#" onMouseOver="visBilde();" onMouseOut="ikkeVisBilde();"><img id="Image1" src="bilde1.jpg" /></a>

</body>
</html>

 

mvh ScratchMyTail

[-Teddy-]

Jeg fant problemet med min kode; du kan ikke skjule et allerede absolutt posisjonert objekt med et annet absolutt posisjonert objekt. Er det noen som vet om dette kan omgås med css?

 

Om du endrer fra position: absolute; på #bilde1 og 2 til relative og dropper top: og bottom: samt setter top og left for #bilde1:hover span slik at den dekker over funker det.

 

Legger ved eksempel:

Klikk for å se/fjerne innholdet nedenfor

<html>
<head>
<style>
* {margin: 0; padding: 0;}

div span{
display: none;
}

#bilde1 {
background: red;
width: 50px;
height: 50px;
float: left;
}

#bilde2 {
background: green;
width: 50px;
height: 50px;
float: left;
}

#bilde1:hover span{
background: blue;
display: block;
position: absolute;
width: 50px;
height: 50px;
left: 50px;
}

</style>


</head>
<body>



<div id="bilde1"><span></span></div>
<div id="bilde2"><span></span></div>
</body>
</html>