javascript fade in probleempje

maandag 8 november 2010 14:00

Acties:

0 Henk 'm!

Topicstarter

Momenteel ben ik bezig met een website. Daarbij maak ik gebruik van een klein stukje javascript om bij een mouseover van een link een plaatje ergens op de pagina weer te geven. Dit werkt ook, alleen zou ik graag dit plaatje in en out laten faden. Dit lukt me echter niet.

JavaScript:

function showPic(imgName) {
  var imgPath = "http://www.google.com/logos/2010/";
  var imgBox = document.getElementById("previewbox");
  var fullPath = imgPath + imgName;
  imgBox.setAttribute("src", fullPath); 
}

Test pagina

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
function showPic(imgName) {
  var imgPath = "http://www.google.com/logos/2010/";
  var imgBox = document.getElementById("previewbox");
  var fullPath = imgPath + imgName;
  imgBox.setAttribute("src", fullPath); 
}
</script>
</head>
<body>
<p><a href="#" onmouseover="showPic('germany10-hp.gif')" onmouseout="showPic('gutman10-hp.jpg')">Test</a></p>
<p><a href="#" onmouseover="showPic('china_national10-hp.gif')" onmouseout="showPic('gutman10-hp.jpg')">Test</a></p>

<img id="previewbox" src="http://www.google.com/logos/2010/gutman10-hp.jpg" alt="Het plaatje" />
</body>
</html>

Zou iemand weten hou ik dit wel voor elkaar krijg?

maandag 8 november 2010 14:08

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Javascript

Wat heb je zelf al geprobeerd?

Als je weinig JS-kennis hebt kun je dit overigens vrij eenvoudig met jQuery voor elkaar krijgen. Die heeft standaard fadeIn en fadeOut methodes.

maandag 8 november 2010 14:18

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Html
Javascript

Ik zie in je code geen enkele poging tot faden (in danwel uit); dat maakt je topic niet meer dan een "ik zou graag zus-en-zo-gehad-hebben, Kan iemand even...?". En omdat we ook geen scriptrequests toestaan gaat dit topic daarom ook op slot.

Zoals je in onze Quickstart zult lezen zien we graag wat je zélf al ondernomen hebt om tot een oplossing te komen. Daar zie ik hier, zoals gezegd, niets van terug.

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Onderwerpen