Hi everyone I am building a website for a school project . I drew some pictures which will be used as link buttons. I want them to change into another picture when someone hovers over the image so they know it is click able. I also want to display a little note when they are over the image with the mouse. I can't use Flash to create this so it has to be pure html and javascript only. Please help me.
Just Google it, there are many tutorials out there on this. It would probably be better to use CSS for the rollovers, and it would be easier.
good luck with the project! I'm sure you've already found what you wanted, but if not, the 'technical' term for what you're looking for is a 'rollover image', or sometimes 'swap image'. If you Google that, as the others have said, you'll find literally thousands of tutorials, and in fact it's not very difficult to do. The little message over the image would be a bit trickier, but in fact if you're using a PC you should see an the 'alt text' for an image appear in a little box when you hover over it. <img src="yourimage" width="x" height="x" alt="write your little message in here and it should appear when mouse is over it" />
good luck with the project! I'm sure you've already found what you wanted, but if not, the 'technical' term for what you're looking for is a 'rollover image', or sometimes 'swap image'. If you Google that, as the others have said, you'll find literally thousands of tutorials, and in fact it's not very difficult to do. The little message over the image would be a bit trickier, but in fact if you're using a PC you should see the 'alt text' for an image appear in a little box when you hover over it. <img src="yourimage" width="x" height="x" alt="write your message in here" />
You don't need to use JavaScript for this, and believe it or not, a plain text link is actually the best option to go with here. Just fake the image with an empty SPAN and some CSS, then add the title attribute to the link. Here's an example (which uses EM instead of SPAN) of what I'm talking about: http://www.pmob.co.uk/temp/navimagereplace.htm
^^ Yes, thats a very good way to do it. However, I usuall just style the link directly, so it looks like <a href="#linkgoeshere#"></a> Code (markup): As seen here: http://bezdredge.net/Examples/CSS_Rollovers/ I do have a tutorial for it somewehre, if you want it.
See the below code and use it:- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> function Change_Big_One(thumb){ document.getElementById('BigOne').src=thumb.src.replace("_th","") } </script> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <style type="text/css"> .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ /*CSS for enlarged image*/ border-width: 0; padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; /*position where enlarged image should offset horizontally */ } </style> <body> <a class="thumbnail" href="#thumb"><img alt="test" src="D.jpg" width="100px" height="66px" border="0" /><span><img src="D1.jpg"/><br /></span></a> <a class="thumbnail" href="#thumb"><img alt="test1" src="L.jpg" width="100px" height="66px" border="0" /><span><img src="L1.jpg" /><br /></span></a> </body> </html> Hope this will work.... Take your image name like what I have given here as D and D1.. and the message inside alt will display that link is there...
Your method is also inaccessible to those who don't have images enabled or supported. Yes, I'm an accessibility freak.
The same effect can be achieved without JavaScript, or hacking for any browser. Cute trick, but it's not what the thread starter asked for.
And for people's information, the little text that appears "on a PC" is alt text, which is only supposed to show when the image doesn't, it's just that IE shows it (improperly). You can either do the fake CSS tooltips, or, what's easier (but only works with the mouse, not keyboard that I know) is the title attribute. This is what should be showing up as little text on hover, not alt. <a href="foozebooze" title="Foo's big bag of booze">Link 1</a> Since there'll be either a background image on the a or a background image on a span if there's image replacement, there is no alt text. As far as I know, you can put title on almost anything.