11. maj 2005 - 10:53
Der er
4 kommentarer og
1 løsning
Skifte billede og tekst ved mouseover
Hvordan kan man lave at ved mouseover at billedet skifter plus at et andet sted på siden kommer noget tekst frem. Det er så forskellig tekst ved hvert billede? Der er ca. 9 billeder.
Kan man loade billederne inden de skal bruges?
Hold da op det er lang tid siden jeg har lavet javascript, men det her skulle gøre det:
<script type="text/javascript">
var preloadImages = ["billede3.png","billede4.png"]; // de billeder der skal loades ind før brug
var imageArray = new Array();
// Preloader billederne
for (i=0;i<preloadImages.length;i++) {
imageArray[i] = new Image();
imageArray[i].src = preloadImages[i];
}
var elementId = "tekstboks";
function changeImage(img,url,tekst) {
img.src = url;
document.getElementById(elementId).innerHTML = tekst;
}
</script>
<body>
<span id="tekstboks"></span>
<img src="billede1.png" onmouseover="changeImage(this,'billede3.png','Dette er et billede');" onmouseout="changeImage(this,'billede1.png','');">
<img src="billede2.png" onmouseover="changeImage(this,'billede4.png','Dette er et billede');" onmouseout="changeImage(this,'billede2.png','');">
</body>
måske lidt forklaring vil hjælpe på forståelsen:
preloadImages er et array hvor du skriver de billeder du vil have loadet inden de skal bruges.
Funktionen changeImage kaldes som det ses på de to billeder. this står her for selve billedets objekt. Det eneste du rigtigt skal tænke på er id'en på den boks hvor teksten skal forekomme (i dette tilfælde span-boksen, men andre elementer kan også bruges). Den id som denne boks har skal også skrives oppe ved elementId variablen, så skulle det virke.