hover image help

@tim28435Mar 03.2007

i have some images set up as links. i would like to use css to make the image change when you hover over it.
can someone please help?
thanks

to post a comment

CSS

9 Comments(s) _↴

@WebJoelMar 03.2007 — #How big are the images? Do you to use a javascript or a CSS effect? I'd recommend the CSS, -it involves the use of just ONE image, which 'rolls-over' with hover. Because it is one image, it is faster.

Your list of links, -horizontal or vertical? (Helps to create a suitable image roll-over to know which).

Using this, the image is the 'background' but the text is actually just that, -[I]actual text[/I]. Therefore, if you needed to add links or change their names, the background image doesn't need to be re-done.

Let me know how many links, vertical or horizontal, show me the image(s) that yo have. Would you like two-state (at-rest & hover-state, or those two AND a 'active-state/mouseDown'? Again, -all one image if planned correctly). I may be able to throw together something quickly for you. Posting the code that you have for your links as they exist now is also a good idea. ?

@tim28435authorMar 04.2007 — #fractured.awardspace.com/index2.html

(please note the file in question is index2, not index)

when you hover over the links/images on the left, they should be replaced with their "hover over" counterparts.

these are also uploaded in the main directory:

homebtn.gif has a hover counterpart of homebtn2.gif

@WebJoelMar 04.2007 — #I am not seeing any images whatsoever. I tried using the URL+imagename and still, got nothing. I tried a few semantic folder names like /images/[I]imagename.ext[/I] and again, nothing. ?

I see TABLE layout and "embed" for the media. -A bit out-of-date. -Would you mind if I updated this a bit with non-TABLE layout? You'd get easier editing, faster downloading, greater cross-browser accessability, etc.

What are these 'rollover images' of? Just a color, a specific pattern or subject? I could create a nice CSS rollover image for this but if you have something that you really want to keep, it would be wasting my time to make something that you didn't want. ?

I'll save a copy of your code and maybe do a little bit of tweaking tonight, and return to this thread later.

(p.s., -it is nice to see others have discovered awardspace.com)

@tim28435authorMar 06.2007 — #i've attached all the files here, including the two different copies of each image.

I see TABLE layout and "embed" for the media. -A bit out-of-date. -Would you mind if I updated this a bit with non-TABLE layout? You'd get easier editing, faster downloading, greater cross-browser accessability, etc.[/QUOTE]
that would be great!

yeah, i'm thinking of buying a domain soon and using awardspace's hosting.

[upl-file uuid=10e49b1c-7483-4d35-9ed8-bc22363d36b8 size=49kB]sitefiles.zip[/upl-file]

@WebJoelMar 07.2007 — #I looked over your link-images... thought something happened to them. They do not need to be "images" to get the text-color to change on-hover. In fact, using images will slow the download time and affect index-ability of your site (plus, images are more-or-less useless to text-readers for the blind/visually disabled, but "text" can be "read" by screenreader software as commonly used by the blind for internet use).

I re-wrote this [I]all-CSS[/I]. Got to validate locally with TIDY, looks almost the same in Fx as IE. I seem to not be able to run your *swf files locally... I may not have the current version of FLASH, -or it is shut-off (either way I do not miss it). Therefore, I cannot really see your *swf in action 'from my desktop'. In Firefox from my desktop, I cannot even see the 'holder' of the <object> (because I think, I do not have the absolute-path URL, Fx will not 'expand' around a non-present element as in invalid/missing/incomplete URL).

Anyway, I used a better tag than "<embed>" for that player (and again, -cannot test it locally as path needs to be 'absolute path' :o ).

Here is your code, -perhaps you can do something with this. I also added a neat 'tool tip' routine to your navigation list that I thought you'd like, and used an emptybackground-image for it, -in case you wish to use one. ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Style-Type" content="text/css" />

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<title></title>

<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%; background-color:#1E2022;

font:x-small Arial, Verdana, sans-serif;

background-color:#1E2022; font-family:Arial, Helvetica, sans-serif; padding-bottom:20px; /*padding-bottom required for IE */

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small;}

/*font-size: small; voice-family: ""}"";

voice-family:inherit; font-size:medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:90%; line-height:1.2em; margin-top:9px; color:white; background-color:none;}

h1, h2, h3, h4, h5, h6 {font-family: verdana, arial, 'times new roman', serif;

font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px; color:white; background-color:none;}

h1{font-size:1.93em; margin-top:12px;}

h2{font-size:1.72em; margin-top:12px;}

h3{font-size:1.52em; margin-top:12px;}

h4{font-size:1.42em; margin-top:12px;}

h5{font-size:1.32em; margin-top:12px;}

h6{font-size:1.21em; margin-top:12px;}

#wrapper {width:906px; height:600px; margin:10px auto; border:1px dotted white;}

.hdr {width:300px; text-align:center; color:white; background-color:none; margin:5px auto; letter-spacing:0.2em; font-size:1.55em;}

#leftCol {position:relative;float:left; width:140px; height:100%; padding:30px 5px 25px 4px;}

#leftCol h2 {margin:0 0 30px 20px; color:#fff99d}

#leftCol p {font-size:0.8em;}

#leftCol ul {margin:20px 0 0 10px; width:130px;}

#leftCol ul li {margin:16px 0 0 0; list-style-type:none; font-size:0.9em;}

#leftCol ul li a {text-decoration:none; color:white; background-color:none;}

#leftCol ul li a:hover {border-bottom:2px solid red; color:#fef76e; font-weight:bold; letter-spacing:0.15em;}

#leftCol a span {display:none;}

/* Above: how the "text-in-span" is handled */

#leftCol a:hover span { display:block; position:absolute;

top:300px; left:5px;width: 110px; z-index:100;color:black;

background-color:#fff99d; background-image:url(); padding:10px; font:1em Verdana, sans-serif;

border:1px solid black;

/* Above: how the "text-in-span" is handled when

hovering over the visible link-text (the 'pop-up') */}

#center {width:600px; height:100%; border:1px solid #636363; margin-left:1px; float:left;}

#center p {color:white;}

#rightCol {float:right; width:130px; height:100%; color:white;

padding:30px 10px 25px 10px;}

#rightCol p {font-size:0.8em;}

#rightCol h2 {margin-bottom:30px; color:#fff99d;}/* margin-bottom used to match #leftCol UL's margin-top value */

#copy {width:910px; height:30px; margin:10px auto; color:white; padding-top:9px; text-align:center; border:1px dashed #636363;}

</style>

<script type="text/javascript">

</script>

<link rel="shortcut icon" href="favicon.ico">

</head>

<body>

<h1 class="hdr" title="FRACTURED: Tim Connell 2007">FRACTURED</h1>



<div id="wrapper">

<div id="leftCol">

<h2 title="Left Column">Left Column</h2>

<ul>

<li title="HOME"><a href="#">HOME<span>This is the Home Page</span></a></li>

<li title="MEDIA"><a href="#">MEDIA<span>Click here to go to our MEDIA page</span></a></li>

<li title="NEWS | LATEST"><a href="#">NEWS | LATEST<span>Click here for the NEWS and LATEST developments</span></a></li>

<li title="AFFILIATES"><a href="#">AFFILIATES<span>Click here to visit our AFFILIATES page</span></a></li>

<li title="CONTACT"><a href="#">CONTACT<span>Click here to CONTACT me</span></a></li>



</ul>

</div>

<div id="center">

<object classid="clsid?27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="400">

<param name="movie" value="main.swf" />

<param name="quality" value="high" />

</object>

<object type="video/x-ms-wmv" data="/main.swf"

width="600" height="400" style="border:1px solid #636363;">

<param name="src" value="/main.swf" />

<param name="autostart" value="true" />

<param name="controller" value="true" />

</object>

<div style="float:left; width:580px; height:100%; padding: 30px 10px 25px 10px; ">

<h2 title="Center Column">Center Column</h2>

<p>Stuff here too... Some additional room for more content here in the center DIV</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.

Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,

volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac

dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.

Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla

mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum

metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor

lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan

turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.

Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium

quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar

purus, vel hendrerit ipsum tellus at ante.</p>

</div>

</div>

<div id="rightCol">

<h2 title="Right Column">Right Column</h2>

<p>More stuff here, etc. This is the right hand column.</p>

<p>More stuff here, etc. This is the right hand column.</p>

</div>

</div>

<div style="clear:both;"></div>



<div id="copy">

<p>© Copyright, Tim Connell 2007. </p>

</div>

</body>

</html>[/QUOTE]

@tim28435authorMar 07.2007 — #wow! that's really cool. especially love the tooltips!

with the images though (and i probably didn't explain this very well) is that i wanted the image to changed because i wasn't changing the colour of the text, rather, i wanted to changed the colour of the "panel" around the text.

Therefore i had two copies of each image, one with a purple colour surrounding the test, and one with a more pink colour surrounding it.

i just wanted to know if there was an easy way to "replace" a image with another image on hover.

(i've put an image below)

[upl-file uuid=4dd1cd16-7a0a-4be5-ac3b-acf2fa657746 size=92kB]explain.jpg[/upl-file]

@WebJoelMar 07.2007 — #Still, -no need to clutter a page with useless images.

Using the template above, and replace the entire "<STYLE></STYLE>" section with this:<style type="text/css">

* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:100%; background-color:#1E2022;

font:x-small Arial, Verdana, sans-serif;

background-color:#1E2022; font-family:Arial, Helvetica, sans-serif; padding-bottom:20px; /*padding-bottom required for IE */

voice-family: ""}"";voice-family:inherit;

font-size:small;/*for IE 5.5 */

} html>body {font-size:small;}

/*font-size: small; voice-family: ""}"";

voice-family:inherit; font-size:medium;*/} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size:90%; line-height:1.2em; margin-top:9px; color:white; background-color:none;}

h1, h2, h3, h4, h5, h6 {font-family: verdana, arial, 'times new roman', serif;

font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px; color:white; background-color:none;}

h1{font-size:1.93em; margin-top:12px;}

h2{font-size:1.72em; margin-top:12px;}

h3{font-size:1.52em; margin-top:12px;}

h4{font-size:1.42em; margin-top:12px;}

h5{font-size:1.32em; margin-top:12px;}

h6{font-size:1.21em; margin-top:12px;}

#wrapper {width:906px; height:600px; margin:10px auto; border:1px dotted white;}

.hdr {width:300px; text-align:center; color:white; background-color:none; margin:5px auto; letter-spacing:0.2em; font-size:1.55em;}

#leftCol {position:relative;float:left; width:140px; height:100%; padding:30px 5px 25px 4px;}

#leftCol h2 {margin:0 0 30px 20px; color:#fff99d}

#leftCol p {font-size:0.8em;}

#leftCol ul {margin:20px 0 0 7px; width:130px; height:190px;}

#leftCol ul li {margin:6px 0 6px 0; list-style-type:none; font-size:0.9em; display:block;}

#leftCol ul li a {text-decoration:none; color:white; background-color:none; border:1px solid #464646; padding:6px 0 0 4px; display:block; height:25px; width:127px;}

#leftCol ul li a:hover {border-bottom:2px solid red; color:#fef76e; background-color:#260751; font-weight:bold; letter-spacing:0.15em; display:block; height:24px;}

#leftCol a span {display:none;}

/* Above: how the "text-in-span" is handled */

#leftCol a:hover span { display:block; position:absolute;

top:335px; left:5px;width: 110px; z-index:100;color:black;

background-color:#fff99d; background-image:url(); padding:10px; font:1em Verdana, sans-serif;

border:1px solid black;

/* Above: how the "text-in-span" is handled when

hovering over the visible link-text (the 'pop-up') */}

#center {width:600px; height:100%; border:1px solid #636363; margin-left:1px; float:left;}

#center p {color:white;}

#rightCol {float:right; width:130px; height:100%; color:white;

padding:30px 10px 25px 10px;}

#rightCol p {font-size:0.8em;}

#rightCol h2 {margin-bottom:30px; color:#fff99d;}/* margin-bottom used to match #leftCol UL's margin-top value */

#copy {width:910px; height:30px; margin:10px auto; color:white; padding-top:9px; text-align:center; border:1px dashed #636363;}

</style>[/QUOTE] and again, -we have created almost exactly the same same, -but image-free. ?

CSS is pretty robust and quite versatile. ?

@tim28435authorMar 08.2007 — #thanks for all the help. i'm going to have to decide if i want a solid colour. but the css is great. i'm going to spend a bit of time understanding! dreamweaver generated most of it.

@WebJoelMar 08.2007 — #thanks for all the help. i'm going to have to decide if i want a solid colour. but the css is great. i'm going to spend a bit of time understanding! dreamweaver generated most of it.[/QUOTE] Using the solid color merely helps me get this back out you you faster....-if you want or prefer to use an image in there, -you can do that too. Just remember, use just a [I]background-image[/I] without any text... let the HTML provide the readable text for the links. But you can place a background-image behind the <li> instead of the background-[I]color[/I] that I used..

And yes, ... I recognized some of the Dreamweaver-like code when I first saw this. ?

Also in #CSS _↴

css <ul> menu - want a mouseover image?vertical subnav transparent menu button alignment

Success!

Help @tim28435 spread the word by sharing this article on Twitter...

Tweet This

hover image help

9 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

hover image help

9 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #CSS _↴