mpsn Posted January 1, 2012 Share Posted January 1, 2012 Hi, this is just a simple JavaScript used where the image should change when you mouse over the image, but it doesn't work. HTML: ==== <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type= "text/javascript" src="js_.js" ></script> </head> <body> <p> <img src="imgs/test_1.png" id="hoverImg" onmouseover="swap();" /> </p> </body> </html> JavaScript: ======= /*External JavaScript*/ //var i = 1; var imgList = array( "test_1.png", "test_2.png", "test_3.png" ); function swap() { var imgSrc = document.getElementById("hoverImg").img.src; var imgNam = "imgs/test_"; if ( i < 4 ) i++; else if ( i == 4 ) i = 1; //imgSrc = imgNam+i; //imgSrc+=".png"; imgSrc = imgList[i]; } You will see the comments which I tried to do instead, I'd appreciated solution to that method too rather than array if possible. Any help appreciated! Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/ Share on other sites More sharing options...
mpsn Posted January 1, 2012 Author Share Posted January 1, 2012 My mistake, here is the updated JavaScript: var imgList = array( "test_1.png", "test_2.png", "test_3.png" ); function swap() { var imgSrc = document.getElementById("hoverImg").img.src; var imgNam = "imgs/test_"; if ( i < 2 ) i++; else if ( i == 2 ) i = 0; //imgSrc = imgNam+i; //imgSrc+=".png"; imgSrc = imgList[i]; } Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/#findComment-1302956 Share on other sites More sharing options...
AyKay47 Posted January 1, 2012 Share Posted January 1, 2012 Where is the variable "i" defined in your code? You will want to add the imgs/ directory before each one of your imgList values. Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/#findComment-1303001 Share on other sites More sharing options...
scootstah Posted January 1, 2012 Share Posted January 1, 2012 Don't use Javascript for image rollovers. Use CSS. <div id="hoverImg"></div> <style type="text/css"> #hoverImg { background:url(test_1.png) no-repeat; width:100px; height:100px; } #hoverImg:hover { background:url(test_1_hover.png); } </style> Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/#findComment-1303064 Share on other sites More sharing options...
AyKay47 Posted January 1, 2012 Share Posted January 1, 2012 Don't use Javascript for image rollovers. Use CSS. <div id="hoverImg"></div> <style type="text/css"> #hoverImg { background:url(test_1.png) no-repeat; width:100px; height:100px; } #hoverImg:hover { background:url(test_1_hover.png); } </style> css will work, however it depends if you want the image to change dynamically or statically. there are several factors that will go into determining if simple CSS is right here. Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/#findComment-1303072 Share on other sites More sharing options...
mpsn Posted January 2, 2012 Author Share Posted January 2, 2012 Is is b/c CSS is faster or is it b/c of shorter typing? I didn't know you could use hover pseudoclass with changing images. Anyways, how would I accomplish this with JavaScript as it is still not working after adding correcting pathway to the images and uncommenting i. var i = 1; var imgList = array( "imgs/test_1.png", "imgs/test_2.png", "imgs/test_3.png" ); function swap() { var imgSrc = document.getElementById("hoverImg").src; var imgNam = "imgs/test_"; if ( i < 2 ) i++; else if ( i == 2 ) i = 0; imgSrc = imgList[i]; } <!DOCTYPE html> <html> <head><title>HTML5, CSS3, CSS, JavaScript, AJAX practice</title> <script type= "text/javascript" src="js_.js" ></script> </head> <body> <p> <img src="imgs/test_1.png" id="hoverImg" onmouseover="swap();" /> </p> </body> </html> Any help appreciated. Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/#findComment-1303200 Share on other sites More sharing options...
AyKay47 Posted January 2, 2012 Share Posted January 2, 2012 here, var imgList = array( "imgs/test_1.png", "imgs/test_2.png", "imgs/test_3.png" ); you are treating the array syntax like PHP, its not, you will need to create an array object and store it in a variable. There are 2 ways to do this, I prefer, var imgList = ["imgs/test_1.png", "imgs/test_2.png", "imgs/test_3.png" ]; also, im not sure why you are checking the value of var i, because each call to swap(); will reset the value to 1 again. take a look here Is is b/c CSS is faster or is it b/c of shorter typing? I didn't know you could use hover pseudoclass with changing images. you can use CSS for this, it tends to be more efficient and normally requires much less code, the CSS pseudo classes are actually very powerful. However again, it depends on whether the image sources are to be dynamic or static. Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/#findComment-1303201 Share on other sites More sharing options...
mpsn Posted January 2, 2012 Author Share Posted January 2, 2012 but I thought it only loads the entire script once and since var i is outside the functions, so then later the onmouseover will just call function swap, so seeing as my example can be done in CSS, what about other cases where you have to use JavaScript with a variable i initialized and then updated within a function, so I don't know why my code is not working. Any help appreciated! Link to comment https://forums.phpfreaks.com/topic/254149-onmouseover-help/#findComment-1303219 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.