January 26, 201115 yr I'm trying to learn this by building a practice site for my mom so this is definitely a begginer question. Any help would be greatly appreciated. I got the mouseover event with javascript from w3schools, but it doesn't really explain how it works. This is the homepage with the script. <html> <head> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript"> function mouseOver() {document.getElementById("home").src="home1.jpg";} function mouseOut() {document.getElementById("home").src="home.jpg";} function mouseOver() {document.getElementById("projects").src="projects1.jpg";} function mouseOut() {document.getElementById("projects").src="projects.jpg";} function mouseOver() {document.getElementById("about").src="about1.jpg";} function mouseOut() {document.getElementById("about").src="about.jpg";} </script> </head> <body> <div id="page"> <img id="dssd" src="dssd.jpg" /> <div id="bar"> <img class="button" id="home" src="home.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()" /> <img class="button" id="projects" src="projects.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()" /> <img class="button" id="about" src="about.jpg" onmouseover="mouseOver()" onmouseout="mouseOut()" /> </div> </div> </body> </html> Only the about button image works with the mouse over thing but not the other two. What am I missing? And is there a way I can put the script in the style.css so I don't have to do it for every page?
January 26, 201115 yr I strongly suggest you use CSS for this problem. There's no need for Javascript at all. Try this HTML: <div id="bar"> <a href="#" title="Home">Homepage</a> <a href="#" title="Projects">Projects</a> </div> With this CSS: #bar a, #bar a:visited{display:block;padding:5px 10px;color:#fff;background:#ca0000} #bar a:hover, #bar a:visited:hover, #bar a:focus{background:#444} That's an example of how to tackle this problem. In your case, you want to use the images as the backgrounds.
January 27, 201115 yr Author I strongly suggest you use CSS for this problem. There's no need for Javascript at all. Try this HTML: <div id="bar"> <a href="#" title="Home">Homepage</a> <a href="#" title="Projects">Projects</a> </div> With this CSS: #bar a, #bar a:visited{display:block;padding:5px 10px;color:#fff;background:#ca0000} #bar a:hover, #bar a:visited:hover, #bar a:focus{background:#444} That's an example of how to tackle this problem. In your case, you want to use the images as the backgrounds. Yes you're right! Wow thats one big headache relieved cos I suck with javascript. I couldn't get your method to work though(I think I still got some more studying to do) but I did find another one that seems to work for image-rollovers which I found easier to understand: In HTML: <a id="home" href="#" title="Home"><span>Home</span></a> <a id="projects" href="#" title="Projects"><span>Projects</span></a> In CSS: #home { float:left; clear:left; display:block; width:114px; height:30px; background:url("home.jpg") no-repeat 0 0; } #home:hover { background-position:0 -30px; } #home span { display:none; } #projects { float:left; display:block; width:114px; height:30px; background:url("projects.jpg") no-repeat 0 0; } #projects:hover { background-position:0 -30px; } #projects span { display:none; } I know you understand how that works Andyl but for those begginers like me that might be viewing this page: You just make your button images like I did below, one on top of the other. Apparently it only works with links so you have to put a text link like I did above in the HTML and put span tags around the text. In the CSS you can see how the spans are set to display none so that the text doesn't show on the screen. The id in the link is what makes it work. In the CSS a block is created first. It's sort of like a small window that only displays the inside of the block. You make that block the same dimensions as single button (in my case 114px by 30px) and make the background of that block your button image. But because your two buttons are stacked in one image the block dimensions cut out the other half so it looks like one button. Then when you hover it shifts the position of the image "up"(- on the y axis) to half the height so that the other half is displayed. The float and clear is for positioning of the block and thus the entire button-rollover effect. The thing is you have to have a seperate CSS id for each button. It's still better than java though I think. Edited January 27, 201115 yr by russel walker
January 27, 201115 yr Yes you're right! Wow thats one big headache relieved cos I suck with javascript. I couldn't get your method to work though(I think I still got some more studying to do) but I did find another one that seems to work for image-rollovers which I found easier to understand: In HTML: <a id="home" href="#" title="Home"><span>Home</span></a> <a id="projects" href="#" title="Projects"><span>Projects</span></a> In CSS: #home { float:left; clear:left; display:block; width:114px; height:30px; background:url("home.jpg") no-repeat 0 0; } #home:hover { background-position:0 -30px; } #home span { display:none; } #projects { float:left; display:block; width:114px; height:30px; background:url("projects.jpg") no-repeat 0 0; } #projects:hover { background-position:0 -30px; } #projects span { display:none; } I know you understand how that works Andyl but for those begginers like me that might be viewing this page: You just make your button images like I did below, one on top of the other. Apparently it only works with links so you have to put a text link like I did above in the HTML and put span tags around the text. In the CSS you can see how the spans are set to display none so that the text doesn't show on the screen. The id in the link is what makes it work. In the CSS a block is created first. It's sort of like a small window that only displays the inside of the block. You make that block the same dimensions as single button (in my case 114px by 30px) and make the background of that block your button image. But because your two buttons are stacked in one image the block dimensions cut out the other half so it looks like one button. Then when you hover it shifts the position of the image "up"(- on the y axis) to half the height so that the other half is displayed. The float and clear is for positioning of the block and thus the entire button-rollover effect. The thing is you have to have a seperate CSS id for each button. It's still better than java though I think. Just for purposes heres the javascript method as well <script type='text/javascript'> /**Global object**/ var object; function over(){ object.src = "image.png"; } function out(){ object.src = "defaultimage.png"; } function mouse_over(){ object = document.getElementById("home"); object.onmouseover = over; object.onmouseout = out; } onload = mouse_over; </script> This will get u started with onmouseover and onmouseout and please note theres not real need for inline js anymore since ur able to call these functions directly, and use an onload event to load the main function on page load Edited January 27, 201115 yr by webdesigner93
January 27, 201115 yr It's also worth saying that in the original thread, each instance of the "mouseOver" function was overwriting the one before, hense only the third one was working. They'd have needed different names or maybe an argument to work. No argument though, the CSS solution is better.
Create an account or sign in to comment