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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Newbie: mouseover on graphics

    Thanks ahead of time for taking the time out of your schedule.

    First I'm pretty limited in my knowledge of coding. I'm trying to learn it a little at a time, and am using dreamweaver CS4.

    My self challenge is I have a graphic in .psd or .jpg, it has a column of text down the right side, I would like to use that as the nav and as you mouseover it changes the color of the text (e.g. bottom text).



    My questions are:

    Would you build this in photoshop then put in dreamweaver or some other program to get this effect?

    I have CS4, but am way behind the curve in a lot of the programs with it.

    I would appreciate any suggestions you might have

  • #2
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    The easiest way would be to have some CSS that changes the color of the text on hover.

    Code:
    <style type="text/css"
    a:link { color: #000099; }
    a:hover {color: #ffffff; }
    </style>
    However, t looks like you've added beveling, so instead you'll need to turn the words into artwork. The diagonal lines would make it problematic to save it out with the background, so I'd put the beveled text on a blue background and save it out as a GIF with index transparency (background turned invisible). That way, no matter where they fall on the diagonal they'll still look ok.

    Just an aside, the diagonal lines obscure the text, making it somewhat difficult to read.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • Users who have thanked marilynn.fowler for this post:

    jetjouster (11-12-2010)

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    You could use an image map and a few Javascript event attributes. psd files only open with photoshop, though, so you'll have to use the jpg version or any other image format (gif, png).
    Code:
    <script type="text/javascript"><!--
    function over(url){
    document.myImage.src = url;
    }
    --></script>
    
    <img src="image.jpg" width="200" height="100" alt="Image" usemap="#imagemap" id="myImage" />
    <map name="imagemap">
    <area href="somefile.html" shape="rect" coords="50,0,100,50" onmouseover="over(image1.jpg)" onmouseout="over(image.jpg)" />
    <area href="somefile2.html" shape="rect" coords="50,50,100,100" onmouseover="over(image2.jpg)" onmouseout="over(image.jpg)" />
    <area href="somefile3.html" shape="rect" coords="50,100,100,150" onmouseover="over(image3.jpg)" onmouseout="over(image.jpg)" />
    </map>
    The Javascript function changes the src attribute in your element with the id myImage to url, which is defined on all of your activated functions. onmouseover changes the image when you mouseover and onmouseout changes it back to the original image- in this way, the whole image changes, so you will want to make as many different versions for the image as you have links. There's a more complicated way of doing this that I found here if you want to look at it. w3schools will tell you about image maps and areas and mouse events if you need more information on how those work.
    Last edited by djh101; 11-12-2010 at 12:44 AM.
    "Yeah science!"
    Online Science Tools

  • #4
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Actually, that was a little off. This should be better:
    Code:
    <script type="text/javascript"><!--
    function over(url){
    document.getElementById("myImage").src = url;
    }
    --></script>
    
    <img src="image.jpg" width="200" height="100" alt="Image" usemap="#imagemap" id="myImage" onmouseout="over
    
    ('image.jpg')" />
    <map name="imagemap">
    <area href="somefile.html" shape="rect" coords="50,0,100,50" onmouseover="over('image1.jpg')" />
    <area href="somefile2.html" shape="rect" coords="50,50,100,100" onmouseover="over('image2.jpg')" />
    <area href="somefile3.html" shape="rect" coords="50,100,100,150" onmouseover="over('image3.jpg')" />
    </map>
    "Yeah science!"
    Online Science Tools

  • Users who have thanked djh101 for this post:

    jetjouster (11-12-2010)

  • #5
    New Coder
    Join Date
    Nov 2004
    Posts
    55
    Thanks
    8
    Thanked 2 Times in 1 Post
    Quote Originally Posted by jetjouster View Post
    Thanks ahead of time for taking the time out of your schedule.

    First I'm pretty limited in my knowledge of coding. I'm trying to learn it a little at a time, and am using dreamweaver CS4.

    My self challenge is I have a graphic in .psd or .jpg, it has a column of text down the right side, I would like to use that as the nav and as you mouseover it changes the color of the text (e.g. bottom text).



    My questions are:

    Would you build this in photoshop then put in dreamweaver or some other program to get this effect?

    I have CS4, but am way behind the curve in a lot of the programs with it.

    I would appreciate any suggestions you might have

    As someone has said before save your "buttons" in a format with transparency options, I would go with png, gif's tend to look a bit pixelated imo. Anyways after you save 2 separate file for each link in each color put this in your external style sheet:

    #button1 a:link{
    background-image: url('path/to/image1');
    background-repeat: no-repeat;
    width: width of the images in px;
    height: height of the images in px;
    text-decoration: none;
    }
    #button1 a:visited{
    background-image: url('path/to/image1');
    background-repeat: no-repeat;
    width: width of the images in px;
    height: height of the images in px;
    text-decoration: none;
    }
    #button1 a:active{
    background-image: url('path/to/image1');
    background-repeat: no-repeat;
    width: width of the images in px;
    height: height of the images in px;
    text-decoration: none;
    }
    #button1 a:hover{
    background-image: url('path/to/image2');
    background-repeat: no-repeat;
    width: width of the images in px;
    height: height of the images in px;
    text-decoration: none;
    }

    then in your links on your page you can use something like this:
    <a href="link.html" id="button1">&nbsp;</a>

    then repeat replacing button1 with button2 etc. etc.

    This method may be kind of janky but will work without having any scripting involved, it's pretty much the same method as mentioned before, just a bit more detail on how to do it with images.

  • The Following 2 Users Say Thank You to dustywb For This Useful Post:

    jetjouster (11-12-2010), NoeG (11-12-2010)

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Very good, thank you all so much!!!

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Location
    San Antonio Tx
    Posts
    251
    Thanks
    12
    Thanked 11 Times in 11 Posts
    @ dustywb thank you for the detailed explination I was also curious about this I had a good understanding of how to do it just never got around to having to code something that way but your explination completly took any confusion out of it..


  •  

    Posting Permissions

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