...

View Full Version : hey guys, an image selector problem here (help!)



SecretAgentHam
12-11-2011, 05:05 AM
its me again! and yeah i need some insight from you guys. i cant seem to get this code to work and i know my flaw is in my "bloat();" function. help me out?



<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Test 4</title>
<script type = "text/javascript">
function preload(){
images = new Array();
images[0] = new Image();
images[0].src = "image1.png";
images[1] = new Image();
images[1].src = "image2.gif";
images[2] = new Image();
images[2].src = "image3.png";
images[3] = new Image();
images[3].src = "image4.jpg";
images[4] = new Image();
images[4].src = "image5.gif";
}
function bloat(){
if(document.getElementById("image1").onMouseOver === true){
document.getElementById("main").src = "image1.png";}
else if(document.getElementById("image2").onMouseOver === true){
document.getElementById("main").src = "image2.gif";}
else if(document.getElementById("image3").onMouseOver === true){
document.getElementById("main").src = "image3.png";}
else if(document.getElementById("image4").onMouseOver === true){
document.getElementById("main").src = "image4.jpg";}
else(document.getElementById("image5").onMouseOver === true){
document.getElementById("main").src = "image5.gif";}
}

</script>
</head>
<body onLoad = "preload();" bgcolor = "orange"><center>
<img src = "bloat();" alt = "main" id = "main" height = "400" width = "450"><br /><br />
<a href = "http://www.joystiq.com">
<img src = "image1.png" alt = "image1" id = "image1" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.engadget.com">
<img src = "image2.gif" alt = "image2" id = "image2" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.amazon.com">
<img src = "image3.png" alt = "image3" id = "image3" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.newegg.com">
<img src = "image4.jpg" alt = "image4" id = "image4" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.smc.edu">
<img src = "image5.gif" alt = "image5" id = "image5" onMouseOver = "bloat();" height = "200" width = "225"></a>
</center></body>
</html>


so essentially the way this should look is a list of five images tiled length wise. when you onMouseOver one it becomes a bigger image right above them. when you click the "thumbnails" as i'll call it, you get linked to a web page.

i got everything formatted right however i think there is an error with my function. any insight fellas? thanks!

devnull69
12-11-2011, 08:47 AM
The insight is: You need to learn about event handlers :-)

With assigning a "value" to onmouseover you are actually assigning code (a function/a method) that will be executed as soon as the event occurs. There is no such thing as a boolean value (true/false) of onmouseover that can be checked to see if the element is currently hovered!



document.getElementById("image1").onmouseover = function() {
document.getElementById("main").src = "image1.png";
};

SecretAgentHam
12-11-2011, 10:02 AM
The insight is: You need to learn about event handlers :-)

With assigning a "value" to onmouseover you are actually assigning code (a function/a method) that will be executed as soon as the event occurs. There is no such thing as a boolean value (true/false) of onmouseover that can be checked to see if the element is currently hovered!



document.getElementById("image1").onmouseover = function() {
document.getElementById("main").src = "image1.png";
};


trying this right now, thanks i wasnt aware!

SecretAgentHam
12-11-2011, 08:25 PM
i got it working, thanks a million!:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum