...

View Full Version : Newbie: mouseover on graphics



jetjouster
11-12-2010, 12:52 AM
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).

http://i109.photobucket.com/albums/n70/jetjouster/Misc/mouseover-project.jpg

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

marilynn.fowler
11-12-2010, 01:26 AM
The easiest way would be to have some CSS that changes the color of the text on hover.



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

djh101
11-12-2010, 01:38 AM
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).


<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 (http://www.quirksmode.org/js/newmouseover.html) 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.

djh101
11-12-2010, 02:09 AM
Actually, that was a little off. This should be better:

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

dustywb
11-12-2010, 07:15 AM
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).

http://i109.photobucket.com/albums/n70/jetjouster/Misc/mouseover-project.jpg

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.

jetjouster
11-12-2010, 02:25 PM
Very good, thank you all so much!!!

NoeG
11-12-2010, 02:53 PM
@ 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..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum