Programming God
Hi guys,
How can i make an image change when i hover on it?
Thank you!
Are you a newbie programmer trying to learn C#? Check out my small tutorial: Visual C# Programming Basics
Programming Expert
How should it change ? And in which language should it be html, php, java, css
Programming God
I hover on button, it "glows" (image changes actually). I leave the button, it stops glowing.Originally Posted by Bartimäus
I know that it can be done in Javascript.
Are you a newbie programmer trying to learn C#? Check out my small tutorial: Visual C# Programming Basics
Programming Expert
I'm not a java programmer but maybe this can help you
Code:<HEAD> <script language="JavaScript" type="text/JavaScript"> function showT(q){ document.getElementById('ima').setAttribute('src','0'+q+'.jpg') } </script> </HEAD> <BODY> <table width="500" border="0"> <tr> <td width="20%"><a href="#" onmouseover="showT(0)">pic 1<br> <br> </a><a href="#" onmouseover="showT(1)">pic 2<br> <br> </a><a href="#" onmouseover="showT(2)">pic 3</a></td> <td><img id="ima" src="00.jpg" width="100" height="100"></td> </tr> </table> </BODY>
Programming God
I remember using a similar script, but i don't remember how to change the images (this script is not really self-explanatory), i will try to see how it works.
Are you a newbie programmer trying to learn C#? Check out my small tutorial: Visual C# Programming Basics
The best way is to combine the no rollover image and rollover image together and use css to quickly align the images height and width, for example like this image:
CSS:
HTML:Code:<style type="text/css"> #navigation ul { width: 320px; height: 30px; position: absolute; /** Places image at the top of the page **/ top: 100px; /** Determines the height from the top of the page **/ left: 300px; /** Determines the width from the left of the page **/ background: url(menu.jpg) no-repeat 0 0; list-style: none; margin: 0; padding: 0; } #navigation li { display: inline; } #navigation li a:link, #navigation li a:visited { border: none; width: 80px; /** width of the button in active state **/ height: 30px; /** height of the button in active state **/ display: block; position: absolute; top: 0; text-indent: -7000px; /** Removes li text from the screen **/ outline: none; } #navigation li.blue a:link, #navigation li.blue a:visited { left: 0; } #navigation li.green a:link, #navigation li.green a:visited { left: 80px /** how many px left of the first button i.e blue **/ } #navigation li.orange a:link, #navigation li.orange a:visited { left: 160px /** how many px left of the first button i.e blue **/ } #navigation li.red a:link, #navigation li.red a:visited { left: 240px /** how many px left of the first button i.e blue **/ } #navigation li.blue a:hover { background: url(menu.jpg) no-repeat 0 -30px; /** moves image up 30px showing the rollover states **/ } #navigation li.green a:hover { background: url(menu.jpg) no-repeat -80px -30px; /** moves image up 30px and right 80px showing the rollover states **/ } #navigation li.orange a:hover { background: url(menu.jpg) no-repeat -160px -30px; } #navigation li.red a:hover { background: url(menu.jpg) no-repeat -240px -30px; } </style>
Here is a live example from my old site: Zellomesh.com - Not Another Flash SiteCode:<div id="navigation"> <ul> <li class="blue"><a href="#">Blue</a></li> <li class="green"><a href="#">Green</a></li> <li class="orange"><a href="#">Orange</a></li> <li class="red"><a href="#">Red</a></li> </ul> </div>
If you look at the main menu you will see it auto rotate when you hover over an image.
Hope this helps and is more easier to follow.
Programming God
Ok, if i understand that correctly, two images are rescaled when you hover on them? One shrinks and another gets larger? I can't understand all the code.
I tried some copy/pasting but it won't work.
I suck at web development.
I remember having a small java script function that changed images, i hate the fact that i lost it and can't find it now.
By the way, that website is cool ,you made the design too?
Are you a newbie programmer trying to learn C#? Check out my small tutorial: Visual C# Programming Basics
Programming Professional
Use the onmouseover attribute, as in <img id="myimage" src="filename" onmouseover="jsfunction();" />
The value of onmouseover should be a function that changes the source file of the image, like this:
Code:function jsfunction(){ this.src = "new-filename"; }
Life's too short to be cool. Be a nerd.
Programmer
James has the right approach as javascript for a simple hover effect is not needed as it can be done in css alone.
Basically what James posted works like this;
Using css you set the background of your list (li) or anchor (a) tag to an image that is twice as tall as the button itself.
The reason the it is twice as tall is because it is a combination of two images, the image on the top is the normal image that is displayed when the mouse is not over the image.
The second image is the image that will be displayed when someone mouses over the button.
Then you set the :hover psudo class of the list or anchor element (li:hover or a:hover) and using the background-position css property you move the image up so that the second hover style button is being displayed.
Using this method over the two different images method allows the image to be loaded before the mouse gets over the button so there is no delay in the hover action.
Feral explains my code very well, the css is so fast to move the image to the hover on state there is no delay and no can see the image moving.
Yes I created and coded zellomesh.com and my friend did the design in photoshop so I did the menu using css.
There are currently 1 users browsing this thread. (0 members and 1 guests)
Posting Permissions
LinkBack URL
About LinkBacks
Bookmarks