I've added a button to my page that looks like this: <input onClick="randomImg()" type="image" src="pilhoger.png" name="input_img" width="63" height="64"> Code (markup): Now I simply want to add a "hover image" that appears when I hover my mouse over the button. I've searched for hover buttons but just find complicated codes. Isn't there a way just to add like onMousehover="hover.jpg" into the code I'm already using?
Use CSS and add a hover state to it: <input onClick="randomImg()" type="image" src="pilhoger.png" name="input_img" width="63" height="64"> HTML: #yourDiv img:hover { } Code (markup):
The best way.. well, my favorite way to do it is to preload the images using JavaScript. In case someone has slow Internet, the image won't appear for them until after a few seconds unless you preload them first. The code isn't too difficult, I'll write it now for you. This is the easiest way, but again the images aren't preloaded.
Ok so I'm stuck on someone else's computer without any programs. I just wrote this in Notepad. Pure unadulterated hell, lol. I've left you comments in the code; it's kind long but efficient. <!--html/javascript image preloader & onmouseover display image script, 7/01/2013--> <h1>Pic onhover with preloader</h1> <script language="javascript"> <!-- if(document.images){ // This is the preloader. // Uncomment images 2-5 (and add more if you need) if you want to use them. To uncomment, delete the /* and */ image1 = new Image(); /* image2 = new Image(); image3 = new Image(); image4 = new Image(); image5 = new Image(); */ image1.src="http://us.123rf.com/400wm/400/400/ronstik/ronstik1208/ronstik120800014/14793762-portrait-of-young-man-thinking.jpg"; /* image2.src=""; image3.src=""; image4.src=""; image5.src=""; */ } function ShowPic(id,Source) { if (Source=="1"){ if (document.layers) document.layers[''+id+''].visibility = "show" else if (document.all) document.all[''+id+''].style.visibility = "visible" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" } else if (Source=="0"){ if (document.layers) document.layers[''+id+''].visibility = "hide" else if (document.all) document.all[''+id+''].style.visibility = "hidden" else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" } } </script> <style type="text/css"> #Style { position:absolute; visibility:hidden; border:solid 1px #CCC; padding:5px; } </style> <a href="#" onMouseOver="ShowPic('Style',1)" onMouseOut="ShowPic('Style',0)">Hover over me</a> <div id="Style"><img src="http://us.123rf.com/400wm/400/400/ronstik/ronstik1208/ronstik120800014/14793762-portrait-of-young-man-thinking.jpg"></div> Code (markup):
Ok, I'm a real newbie in webdesign, and I appreciate the effort. But I don't understand much of it and I want to keep it simple so that I learn more than just copy/pasting. I'll probably get back and use this code when I have more knowledge though... As you say, it's more efficient. For now I wanna use the first code, and I have some questions about it. I don't understand divisions that much. This is the code I wrote but it didn't work. The #hoverpic hoverbutton.jpg:hover code is under a CSS-script, so I'm pretty sure it's in the right place, the code is probably wrong though... #hoverpic hoverbutton.jpg:hover { } <div id="hoverpic"> <input onClick="randomImg()" type="image" src="pilhoger.png" name="input_img" width="63" height="64"> </div> Code (markup): Can you explain it in a more "newbie friendly" way?
I'm pretty sure you didn't write the "ShowPic()" function, you just copied it from here: http://www.webdeveloper.com/forum/showthread.php?249768-JavaScript-Show-image-on
No, I pasted it from a snippet that I already had saved. I only wrote the preloader, changed some things and added comments. Thanks for your concern(?)
you changed the name of the function from ShowPicture() to ShowPic() and changed the image sources, Just happened to have the snippet saved on *someone elses* computer i suppose Yeah must have been hell for you passing off someone elses work as your own....
I had the snippet saved in Evernote, and never claimed those two functions were my code. I didn't change the name of anything, and I don't have to explain myself to you.
It needs to be more like this, I'm just not sure what to put in the { } because I don't know what your function randomImg() or what hoverbutton.jpg is. <style type="text/css"> #hover img:hover { } </style> Code (markup):
The hoverbutton.jpg is the picture I want to show when I hover the mouse over the button. randomImg() is the function I want to call when I press the button. What am I supposed to do with the code you wrote?
You need to put it in your stylesheet. If you don't have one, you can either make one or use inline styling, but I don't recommend doing so. Can you paste or PM me the code for randomImg() so I can see what it's doing? Or paste your site?