How do I highlight an image on mouseover???

**dumphead** · 11-29-2005, 11:13 AM

Mmh? What exactly do you mean? A simple mouseover with your picture in blue? Or a small animation where you pic fades from original to blue?

**fatfoo** · 11-29-2005, 11:25 AM

comus thumbs did that for me, the default template i think highlighted the thumbs on mouseover

**soulbleed** · 11-29-2005, 02:02 PM

u can do it with css ..try here

http://www.javascriptkit.com/dhtmltutors/cssimage.shtml

**Dynamix** · 11-29-2005, 02:03 PM

Here's an easier way. Copy that Opacity script and use it, however put each thumb in its own table with a Blue background, ie:

Code:

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR="#DesiredBlueHere"><A HREF=""><IMG SRC="thumbnail-here.gif" onMouseOver="JavaScript here" onMouseOut="JavaScript here"></A></TABLE>

You can snag my fade code from:
http://www.dxmgroup.com/xs/fade.js

And its usage is in the source of:
http://www.dxmgroup.com/xs/

Just be forewarned.. this opacity script and all others are developed for IE.. your FireFox users won't notice any difference.

**LT1hero93** · 11-29-2005, 04:43 PM

Thanks for all the help guys. I used CSS to do it. Very simple and very little code.

<style type="text/css">
#highlight {FILTER: Alpha(Opacity=100)}
A:hover #highlight {FILTER: Alpha(Opacity=70)}
</style>

<%TEMPLATE
NAME Thumb
HTML <td bgcolor="#3838E4"><a href="go.php?ID=##Gallery_ID##&URL=##Gallery_URL## &P=60" title="##Description##" target="_blank" ><img id="highlight" src="##Thumbnail_URL##"></a></td>
%>

I set the background to the color I wanted the highlight to be then I put the CSS style on the image I wanted to get highlighted. Boom works beautiful.

www.thepornpros.com

Thanks again!

Shawn

**directfiesta** · 11-29-2005, 07:58 PM

Originally posted by LT1hero93

Thanks for all the help guys. I used CSS to do it. Very simple and very little code.

<style type="text/css">
#highlight {FILTER: Alpha(Opacity=100)}
A:hover #highlight {FILTER: Alpha(Opacity=70)}
</style>

<%TEMPLATE
NAME Thumb
HTML <td bgcolor="#3838E4"><a href="go.php?ID=##Gallery_ID##&URL=##Gallery_URL## &P=60" title="##Description##" target="_blank" ><img id="highlight" src="##Thumbnail_URL##"></a></td>
%>

I set the background to the color I wanted the highlight to be then I put the CSS style on the image I wanted to get highlighted. Boom works beautiful.

www.thepornpros.com

Thanks again!

Shawn

IE fine... Firefox= nada

**Nookster** · 11-30-2005, 06:19 PM

Originally posted by directfiesta

IE fine... Firefox= nada

Yep, must code it for all browsers...so use the CSS but add some Javascript for Gecko browsers. The Javascript would be something to this effect...

Code:

<script language=JavaScript>
function changeBG(item){
   document.item.bgColor = #3B6793;
}
</script>
<!-- the above code goes in the header -->

<!-- tag the links like... -->

<a href=# onmouseover="javascript:changeBG(this);">Link</a>

ya, something to that effect...

Oh, a simple Google came up with this link as the first http://javascript.internet.com/bgeff...or-change.html

**Dynamix** · 12-02-2005, 02:57 AM

Originally posted by Nookster

Yep, must code it for all browsers...so use the CSS but add some Javascript for Gecko browsers. The Javascript would be something to this effect...

Code:

<script language=JavaScript>
function changeBG(item){
   document.item.bgColor = #3B6793;
}
</script>
<!-- the above code goes in the header -->

<!-- tag the links like... -->

<a href=# onmouseover="javascript:changeBG(this);">Link</a>

ya, something to that effect...

Oh, a simple Google came up with this link as the first http://javascript.internet.com/bgeff...or-change.html

close, but you need the "opacity" attribute to work in both Mozilla and IE. This can be accomplished by setting their respective names..

Use this code on the thumbnail:

Code:

<A HREF="" CLASS="menu"><IMG SRC="thumb.gif"></A>

And place this in your stylesheet:

Code:

a.menu img {
filter:alpha(opacity=100); 
-moz-opacity: 1.0; 
opacity: 1.0;}

a.menu:hover img {
filter:alpha(opacity=65);   
-moz-opacity: 0.65;   
opacity: 0.65;
}

Filter:alpha() is for IE, -moz-opacity is an outdated attribute for older Mozilla browsers, Opacity is for FireFox and newer Mozilla browsers.

How do I highlight an image on mouseover???

How do I highlight an image on mouseover???

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment