rollover image define by css in html body of page

**questions** · 08-08-2008, 11:43 PM

Hi,

I am using this CSS code to describe rollovers:

#rollover1 {
display: block;
width: 200px;
height: 53px;
background: url('image.jpg') no-repeat;
}
#rollover1:hover {
background-position: bottom;
}

I am wondering if there is a way to do it next to the image itself, in the "body" part of the html page.
I tried putting this down.

<div style="display: block; width: 306px; height: 231px; background: url('image.jpg') no-repeat;"<a href="#"> </a></div>

I got errors and I also don't know where to put in the information about the "background-position".

Also the image jumped out of line (it is currently in a "container" so that all images are showing up "in-line" horizontally" like in this example.

http://www.freewebs.com/testpractic/...al-scroll.html

Thanks!

**questions** · 08-08-2008, 11:49 PM

Or should I give up and just use Javascript because I also want a border around the image (the kind you typically get for a linked file)?

**Nile** · 08-08-2008, 11:57 PM

Yes. Use Javascript. This one isn't next to the image, but this is the one that I suggest using.
This should be your CSS:

Code:

#rollover1 {
display: block;
width: 200px;
height: 53px;
background: url('image.jpg') no-repeat;
}
.rollOver {
background-position: bottom;
border: 1px solid #000;
}

And this should be your HTML:

Code:

<div id="rollover1" onMouseOver="this.className='rollOver';" onMouseOut="this.className=null;"></div>

**TheJoshMan** · 08-09-2008, 12:09 AM

There is a way to "fix" the issues with the ":hover" pseudo class in IE...

It takes a little bit of work, but not much. If you're interested, do this...

Place the following code into a blank text file, then save it as "IE_Fixes.htc"

Code:

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
  { element.className += ' hover';
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\bhover\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\bactive\b/,'');
  }
</SCRIPT>

Then in your CSS, you can call it by using this for any element you want to achieve a css rollover:

Code:

div, span, td, tr, table, button{
behavior:url('IE_Fixes.htc');
}

Then in the part of your css that controls the ":hover" just add this:

Code:

div:hover, div.hover{
background:url('someimage.jpg');
}

Notice that instead of JUST using the ":hover" you have to use ".hover" as well.

**questions** · 08-09-2008, 12:20 AM

Originally Posted by Nile

Yes. Use Javascript. This one isn't next to the image, but this is the one that I suggest using.
This should be your CSS:

Code:

#rollover1 {
display: block;
width: 200px;
height: 53px;
background: url('image.jpg') no-repeat;
}
.rollOver {
background-position: bottom;
border: 1px solid #000;
}

And this should be your HTML:

Code:

<div id="rollover1" onMouseOver="this.className='rollOver';" onMouseOut="this.className=null;"></div>

Thanks. I tried doing what you say but look at what a mess it is. Things all over the place and still not jumping to bottom of image.

original file all lined up:
http://www.freewebs.com/testpractic/...al-scroll.html

file with rollover:
http://www.freewebs.com/testpractic/...l-scroll2.html

the image:
http://www.freewebs.com/testpractic/image.jpg

the css:
http://www.freewebs.com/testpractic/web-horizontal.css

Thanks.

**Nile** · 08-09-2008, 12:29 AM

Code:

rollover2 {
display: block;
width: 231px;
height: 231px;
background: url('image.jpg') no-repeat;
}

You have that wrong, your either missing a . or a # at before rollover2.

**questions** · 08-09-2008, 01:18 AM

OK. I'm redoing it in the dumbest way possible and using this script instead.

CSS
#image {
position: relative;
display: block;
width: 200px;
height: 200px;
background: url('image.jpg') no-repeat;
border: 5px solid;
}
#image:hover {
background-position: bottom;
border: 5px solid;
}

HTML
<a href="#" id="image"> </a>

I think the issue is something to do with it's "position" and I've tried every option.

Basically, what happens is that inside this "container" that it is supposed to be in, the image moves to be "over" or "under" the first image in the series. Then the image after it looses its mind and goes again vertically under it.

Here is how they line up without the rollover image:
http://www.freewebs.com/testpractic/...al-scroll.html

Here is how they line up with the rollover images:
http://www.freewebs.com/testpractic/...al-scroll.html

Thanks.

**TheJoshMan** · 08-09-2008, 01:36 AM

questions, have you given my solution a shot? It may seem a little confusing... but it's really not. It will make what you're trying to do MUCH easier, and it affects the entire page, not just ONE image.

In other words, rather than having to use something like:

Code:

<div id="rollover1" onMouseOver="this.className='rollOver';" onMouseOut="this.className=null;"></div>

Everytime you want to make something "rollover", all you would have to do is use CSS like this:

Code:

div:hover, div.hover{
border:5px solid blue;

**questions** · 08-09-2008, 02:26 AM

Originally Posted by Nyne Lyvez

There is a way to "fix" the issues with the ":hover" pseudo class in IE...

It takes a little bit of work, but not much. If you're interested, do this...

Place the following code into a blank text file, then save it as "IE_Fixes.htc"

Code:

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
  { element.className += ' hover';
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\bhover\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\bactive\b/,'');
  }
</SCRIPT>

Then in your CSS, you can call it by using this for any element you want to achieve a css rollover:

Code:

div, span, td, tr, table, button{
behavior:url('IE_Fixes.htc');
}

Then in the part of your css that controls the ":hover" just add this:

Code:

div:hover, div.hover{
background:url('someimage.jpg');
}

Notice that instead of JUST using the ":hover" you have to use ".hover" as well.

Yeah. I am just totally confused with this.
Are you saying the first part, put in the CSS file somewhere? And why does it say "</SCRIPT>" at the end of it?
I don't know what IE fix you are referring to or why I would need one.

The second part, also just put it into the CSS file somwhere, just once?

The third part, also in the CSS file? Then what goes into the HTML file?

THANKS.

**TheJoshMan** · 08-09-2008, 02:58 AM

Ok, here's the breakdown...

IE doesn't recognize :hover except on anchor (<a href> or "link") elements
Now, let's say you wanted to make something have a "rollover" effect but it's NOT a link...

The fix I posted will help you to achieve this.
The first portion gets pasted into a BLANK text file and then saved as "IE_Fixes.htc"
When you save the file, type it in EXACTLY as it is above (add the ".htc" and everything)

So, that being said... Here is EVERYTHING you should paste into a new text file and save as "IE_Fixes.htc":

Code:

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
  { element.className += ' hover';
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\bhover\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\bactive\b/,'');
  }
</SCRIPT>

Now, the second portion is telling IE that it should use this script for anything other than anchors (<a href> "links") that you define a ":hover" attribute to.

If you want to make a ":hover" attribute for any <img> on the page, then you would put THIS in your CSS:

Code:

img{
behavior:url('IE_Fixes.htc');
}

Now, let's say you wanted all the <img>'s on a page AND all the <div>'s on a page to have a ":hover" attribute... Then you would use THIS instead:

Code:

img, div{
behavior:url('IE_Fixes.htc');
}

Now, the third part is the actual CSS code that tells those elements what to do once hovered on...

Code:

img:hover, img.hover{
border:5px solid blue;
}

Or for the second example it would be...

Code:

img:hover, div:hover, img.hover, div.hover{
border:5px solid blue;
}

Thread: rollover image define by css in html body of page

Thread Tools

Search Thread

rollover image define by css in html body of page

The Following User Says Thank You to TheJoshMan For This Useful Post:

The Following User Says Thank You to TheJoshMan For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions