View Full Version : Image changes color hover effects
11-04-2010, 03:53 AM
How do I mouseover an image and the color of the image changes when im hovering over it. Im guessing you have to create a second image with the mouseover color you want and have it appear when you hover, but how would I go about doing this????
11-04-2010, 04:04 AM
All of your posts here are very basic and very easy to research for yourself. If you really want to learn html, you should do some reading and learning on your own. Here (http://www.w3schools.com)is a good site to learn as well as here (http://www.alistapart.com).
11-04-2010, 04:06 AM
document.id.src = url;
<img id="myImage1" src="myImage1.gif" onmouseover="imgChange('myImage1','/images/myImage2.gif')" onmouseout="imgChange('/images/myImage1.gif')" />
11-04-2010, 05:55 PM
Thanks djh101 I got it working but my only problem is that the image changes when im not even mousing over it. My mouse is on the bottom right of the screen and the image is on the top left. When I move towards the image about halfway there the image changes.
11-04-2010, 11:10 PM
Go to www.whatupwithit.com and you will see what I mean in the previous post. I also dont know why I have a duplicate of controller1.gif in upper right of screen???? Heres my HTML and CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Level1_Arial.css" rel="stylesheet" type="text/css" />
<link href="data.css" rel="stylesheet" type="text/css" />
<img id="blackborder" src="border.gif" />
<img id="blackborder2" src="border.gif" />
<h1 id="Gamereviews" >Latest Game Reviews</h1>
<img id="gamelink" <img src="C:\Users\Andrew\Desktop\What Up Whit It\controller.gif" onmouseover="this.src='C:\Users\Andrew\Desktop\What Up Whit It\controller1.gif';" onmouseout="this.src='C:\Users\Andrew\Desktop\What Up Whit It\controller1.gif'" alt="controller" />
<img id="gamelink" src="controller1.gif"
onmouseout ="document.getElementById('gamelink1').src='controller.gif';" />
<img id="gamelink1" src="controller.gif" />
<img id="movielink" img src="movie.gif"/>
11-04-2010, 11:13 PM
Make sure the onmouse commands are on the img tag; make sure the id for that tag is unique (that includes to other non-img tags); give the image a defined height and width (if it isn't square and has transparent background, it should still change whenever it gets inside the height/width box); you could try taking id out as a variable and replacing it with the actual id of the image [at least for testing purposes right now]. Could you post a link to your site?
11-04-2010, 11:37 PM
Theres a link to my site in my previous post but here it is again. www.whatupwithit.com
11-05-2010, 07:53 AM
<img id="gamelink" isn't closed, it opens and then another img tag is opened. As for your site, there's pretty much nothing there.
Powered by vBulletin® Version 4.2.2 Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.