Archief - mouse over(link) -> foto veranderd

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
j

jeetn

Legacy Member
Hoi iedereen!

Omdat er zodanig veel scripts bestaan en ik niet direct vind wat ik zoek post ik even deze vraag hier.

Ik heb 20 links en 1 foto op 1 pagina. Naargelang je over de links(mouse over) gaat veranderd de foto steeds per link. Wanneer men doorklikt op de link gaat men naar een andere pagina.

iemand die weet hoe dit op te lossen? Iemand reeds een scriptje?

Ik hoor het zeer graag!

grtjes!
a

anor

Legacy Member
voorbeeld van uw ding want ik snap niet echt veel van uw uitleg
j

jeetn

Legacy Member
Zie hieronder mijn voorbeeld:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>

<a href="verf.html">verf</a>
<a href="tapijt.html">tapijt</a>
<a href="behang.html">behang</a>

<img src="verf1.jpg" border="0" alt="" />

</body>
</html>

Wanneer men mouseover doet op de link VERF dan wil ik een verfpot zien in de IMG.
Wanneer men mouseover doet op de link TAPIJT dan wil ik een tapijt zien in de IMG.
enz...
Z

Zero Grav

Legacy Member
Met css kunt ge dat simpelweg oplossen door een image in uw link te zetten:

<a href="verf.htm">verf <img src="verfpot.jpg" alt="" /></a>

In uw css:
a img { display: none; }
a:hover img { display: block; position: absolute; top: px; left: px; }

Met javascript kunt ge hetzelfde bereiken door het src attribuut aan te passen van uw image. Ik kan geen javascript (ergo, dat voorbeeld kan ik hier niet neerschrijven), maar in JQuery is dat op 2 seconden klaargespeeld.
j

jeetn

Legacy Member
Iemand die dit wel kan? Moet toch niet zo moeilijk zijn?

Je hebt dus op 1 pagina, 20 links staan. Op diezelfde pagina staat er 1 afbeelding. Wanneer men over de links gaat met de muis dan moet die afbeelding veranderen. Er zullen dus 20 afbeeldingen moeten worden preloaded.

Iemand die JS kan?
B

BuZz.LiGhTYeAr

Legacy Member
waarom in JS als het in CSS ook kan :wtf:

<img src="image.jpg" onmouseover="this.src='images_hoverstate.jpg'" onmouseout="this.src='image.jpg'" />
Z

Zero Grav

Legacy Member
Dat is wel niet precies wat hij bedoelde. Maar in een plotselinge vlaag van vergane Javascript kennis (door uw codevoorbeeld dus) kan ik mij wel herinneren hoe dat in zijn werk gaat.

<a href="#" onmouseover="getElementById('hoverFoto').src='bla.jpg" onmouseout="getElementById('hoverFoto').src='bli.jpg">###</a>

<img src="bli.jpg" id="hoverFoto" alt="" title="" />

Ongetest wel..
j

jeetn

Legacy Member
Zero Grav zei:
Dat is wel niet precies wat hij bedoelde. Maar in een plotselinge vlaag van vergane Javascript kennis (door uw codevoorbeeld dus) kan ik mij wel herinneren hoe dat in zijn werk gaat.

<a href="#" onmouseover="getElementById('hoverFoto').src='bla.jpg" onmouseout="getElementById('hoverFoto').src='bli.jpg">###</a>

<img src="bli.jpg" id="hoverFoto" alt="" title="" />

Ongetest wel..
Klik om te vergroten...

werkt niet :oink:
j

jeetn

Legacy Member
Heb ook even volgende getest maar werkt ook niet. Zeer eigenaardig...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

img1 = new Image();
img1.src = "tapijt1.jpg";

img2 = new Image();
img2.src = "verf1.jpg";

img3 = new Image();
img3.src = "behangpapier.jpg";

function change(num){

document.images["linkpic"].src = "img" + num + ".ext";

}

</script>
</head>
<body>
<img src="website-zora-2009-sliced_02.jpg" name="linkpic">
<br><br>
<a href="page.ext" onmouseover="change('1')">Tapijt</a><br>
<a href="page.ext" onmouseover="change('2')">Verf</a><br>
<a href="page.ext" onmouseover="change('3')">Behang<br>


</body>
</html>
p

passero

Legacy Member
alle kben in een vriendelijke bui vandaag:
<script language="javascript">
function changePic(pic)
{
var anImage = document.getElementById("anImage");
anImage.src = pic;
}
</script>

<a href="verf.html" onmouseOver="changePic('verf.jpg');">Verf</a>
<a href="behang.html" onmouseOver="changePic('behang.jpg');">Behang</a>

<img src="image.jpg" id="anImage"/>

Als het nie werkt dan zou je genoeg info moeten hebben om het te doen werken want tis nie bepaald rocket science...
j

jeetn

Legacy Member
Thnx!!! Het werkt, heb zelf een mouseDown erbij gezet. Dank u vriendelijk!!! (was er al een paar dagen naar op zoek..)

passero zei:
alle kben in een vriendelijke bui vandaag:
<script language="javascript">
function changePic(pic)
{
var anImage = document.getElementById("anImage");
anImage.src = pic;
}
</script>

<a href="verf.html" onmouseOver="changePic('verf.jpg');">Verf</a>
<a href="behang.html" onmouseOver="changePic('behang.jpg');">Behang</a>

<img src="image.jpg" id="anImage"/>

Als het nie werkt dan zou je genoeg info moeten hebben om het te doen werken want tis nie bepaald rocket science...
Klik om te vergroten...
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan