Using :hover [Archive] - CodingForums.com

View Full Version : Using :hover

ToughLuck

08-09-2008, 08:41 PM

Here's the site I'm working on for reference:

franchisegfx.net

Now, I'm trying to make it so that when you hover over the buttons in the navbar it will replace it with a different image where the only thing that is changed is the color of the text (I used a slight gradient which is why I can't just change the text color). So far I haven't been successful in doing so (I've tried changing my button id to a class and then tried using the a.button:hover but couldn't find an option to change the image source. Could it be something I need to do with javascript? Anyways, help is very much appreciated. :)

VIPStephan

08-10-2008, 12:45 AM

Simple trick: Create regular text links and replace the text with an image where you have the regular state and the mouseover state in one image (or even all link images in one image) as described on http://alistapart.com/articles/sprites

Arbitrator

08-10-2008, 01:45 AM

This can be done with a simple rollover script. I updated one of my older demos which demonstrates how one might do this:

Live:

HTML: http://www.jsgp.us/demos/cf115878-image-rollover.html.php
XHTML: http://www.jsgp.us/demos/cf115878-image-rollover.xhtml.php

HTML:
<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html lang="en-Latn">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="application/ecmascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Demo for CodingForums.com Thread 115878</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-06-07">
<meta name="Created" content="2008-08-09">
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html, h1 { font: 16px/1.2 sans-serif; }
html { background: #ded url("bg_c.png"); color: black; }
h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
a { color: black; }
div { margin: 1em; }
*#button, img { display: block; width: 157px; margin: 0 auto; color: #ed145a; text-align: center; text-decoration: none; font: bolder italic 33.375px/45px "Arial Black", sans-serif; }
*#button:hover { color: #148fed; }
img { border: none; background: url("button_b.png") -147px -45px no-repeat; } /* This preloads the second image. */
</style>


</head>
<body>

<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=115878">CodingForums.com Thread 115878</a></h1>
<div><a id="button" href=""><img alt="button" width="157" height="45" src="button_a.png"></a></div>


<script type="application/ecmascript" defer="defer">
var d = document;
var a_element = d.getElementById("button");
var original_src_value = a_element.firstChild.getAttribute("src");
a_element.addEventListener("mouseover", function () {
this.firstChild.setAttribute("src", "button_b.png");
}, false);
a_element.addEventListener("mouseout", function () {
this.firstChild.setAttribute("src", original_src_value);
}, false);
</script>



</body>
</html>

XHTML:
<?xml version="1.0" encoding="UTF-8"?>

<html xml:lang="en-Latn" xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"></meta>
<meta http-equiv="Content-Script-Type" content="application/ecmascript"></meta>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<title>Demo for CodingForums.com Thread 115878</title>
<meta name="Author" content="Patrick Garies"></meta>
<meta name="Created" content="2007-06-07"></meta>
<meta name="Created" content="2008-08-09"></meta>
<style type="text/css" media="all">
* { margin: 0; padding: 0; }
html, h1 { font: 16px/1.2 sans-serif; }
html { background: #ded url("bg_c.png"); color: black; }
h1 { opacity: 0.8; padding: 2em; background: white; font-weight: bolder; }
a { color: black; }
div { margin: 1em; }
*#button, img { display: block; width: 157px; margin: 0 auto; color: #ed145a; text-align: center; text-decoration: none; font: bolder italic 33.375px/45px "Arial Black", sans-serif; }
*#button:hover { color: #148fed; }
img { border: none; background: url("button_b.png") -147px -45px no-repeat; } /* This preloads the second image. */
</style>

</head>
<body>

<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=115878">CodingForums.com Thread 115878</a></h1>
<div><a id="button" href=""><img alt="button" width="157" height="45" src="button_a.png"></img></a></div>

<script type="application/ecmascript" defer="defer">
var d = document;
var a_element = d.getElementById("button");
var original_src_value = a_element.firstChild.getAttributeNS(null, "src");
a_element.addEventListener("mouseover", function () {
this.firstChild.setAttributeNS(null, "src", "button_b.png");
}, false);
a_element.addEventListener("mouseout", function () {
this.firstChild.setAttributeNS(null, "src", original_src_value);
}, false);
</script>

</body>
</html>

ToughLuck

08-10-2008, 06:22 PM

Ugh, thanks for the links guys but I had a hard time following either of them. For the <ul> way of doing it, I'd have to combine my images into one with Photoshop (so the red home (the one I start with before hovering) would be on top and the white hover one underneath)? The use of transparent url also lost me.

For the javascript one, I was more confused with what to change in it to fit my current code. I also have no javascript experience (it's my least favorite language) so I wasn't sure what to change to have it work for my multiple images. I was also confused on the pre-loading your images part.

ninnypants

08-10-2008, 08:10 PM

What you would do with the images once you had them built
start out with markup like this
<a>Link</a>
then you would add this styling

a{
background: url('yourbgimage.png') 0 0 no-repeat;
display:block;
height:height of acive section;
width: bgimgwidth;
}
a:hover{
background-position: 'top of active image' 0;
}

ToughLuck

08-11-2008, 07:21 PM

After dealing with the problem for over a couple hours (yes, it was frustrating me a lot where I tried 7-8 different suggestions from Google) I think I finally found a working script. I understand the concept behind the CSS ones but just couldn't get them to work. I'll stick with my javascript one for now (despite it being a bit lengthier), thanks for the help. Once I knew the term of what I was trying to do it didn't take long for Google to help me.

Arbitrator

08-13-2008, 08:50 AM

For the javascript one, I was more confused with what to change in it to fit my current code. I also have no javascript experience (it's my least favorite language) so I wasn't sure what to change to have it work for my multiple images.This code was meant to demonstrate a technique and only works with a single image; demos that I write are generally not meant to be copy and pasted and require some effort on the part of the person being helped. If you don’t know and are not willing to learn W3C DOM‐based ECMAScript (JavaScript), then I suppose it isn’t very useful to you.

I was also confused on the pre-loading your images part.The second image, called by the script, is preloaded via CSS. This second image is specified as a background image of the img element which is then positioned out of view using the CSS background-position property. This causes the image to be downloaded in the background by the browser and, thus, mitigates the download‐based delay that would otherwise occur when you first hover your mouse cursor over the first image.

The positioning is required in case the first image fails to load and the alt text is displayed (in which case you would see the background image) or if the first image has transparent parts (ditto).