Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post

    Image changes color hover effects

    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????

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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 is a good site to learn as well as here.

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    onmouseover can be used to trigger a Javascript function that changes the image.
    Code:
    <script type="text/javascript"><!--
    function imgChange(id,url){
     document.id.src = url;
    }
    --></script>
    ...
    <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).
    "Yeah science!"
    Online Science Tools

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    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.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    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">
    <head>
    <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" />
    </head>

    <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"
    onmouseover="document.getElementById('gamelink1').src='controller1.gif';"
    onmouseout ="document.getElementById('gamelink1').src='controller.gif';" />
    ...
    <img id="gamelink1" src="controller.gif" />
    <img id="movielink" img src="movie.gif"/>
    <blockquote>&nbsp;</blockquote>


    body
    {
    background-image:url('blackbar.jpg');
    background-repeat:repeat-x;
    }
    #movielink {position:absolute}
    #movielink {left:1040px;}
    #movielink {top:10px;}


    #gamelink
    {
    position:absolute;
    padding-left:830px;
    top: 20px;
    left: 10px;
    }
    #blackborder
    {
    position:absolute;}
    #blackborder {left:530px}
    #blackborder2
    {
    position:absolute;}
    #blackborder2 {right:530px}

  • #6
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    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?
    "Yeah science!"
    Online Science Tools

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Posts
    272
    Thanks
    8
    Thanked 1 Time in 1 Post
    Theres a link to my site in my previous post but here it is again. www.whatupwithit.com

  • #8
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    <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.
    "Yeah science!"
    Online Science Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •