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
onmouseover can be used to trigger a Javascript function that changes the image.

<script type="text/javascript"><!--
function imgChange(id,url){
document.id.src = url;
<img id="myImage1" src="myImage1.gif" onmouseover="imgChange('myImage1','/images/myImage2.gif')" onmouseout="imgChange('/images/myImage1.gif')" />

Dynamic images are one way to automatically format the image into what you want it to be on mouseover, but that's fairly complicated. There might be a way to use Javascript to simply change the hue, but I'll have to double check on that. Making two of every image is probably the easiest way to go- you can use Photoshop or any other photo editing software capable of changing the hue (in Photoshop you would use color replacement for that).

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">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="Level1_Arial.css" rel="stylesheet" type="text/css" />
<link href="data.css" rel="stylesheet" type="text/css" />

<body bgcolor="#006600">

<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"/>

#movielink {position:absolute}
#movielink {left:1040px;}
#movielink {top:10px;}

top: 20px;
left: 10px;
#blackborder {left:530px}
#blackborder2 {right:530px}

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.