image hover [Archive] - CodingForums.com

View Full Version : image hover

tek

03-09-2006, 10:35 AM

I don't know if it's possible in css but I'll just try it here (if it isn't can someone move this to a place what can do this? thanks)

I have a site with a lot of links on it and what I want to do is to have an image appear whenever someone hovers over a link.

You can view an example here: http://www.funnygames.nl/

Arbitrator

03-09-2006, 10:42 AM

It is in fact possible to display an image when hovering over a link in CSS. You will have to be more specific as to what you want though. It appears that you already have hover-based images.

An example: http://csszengarden.com/?cssfile=/063/063.css.

tek

03-09-2006, 10:51 AM

the site I posted isn't mine :P

that's the "happening" I actually want for my own site. I just don't know how that site did it.

I don't know if they did it in css or java script, but w/e works, works for me. :)

don't know if it's against your policy or whatever, but I'll post my site so you can see what it has to work in: http://www.game-kings.com/

if you don't want this, just remove it :)

ronaldb66

03-09-2006, 12:29 PM

DSB

03-09-2006, 12:53 PM

I ended up doing this exact same thing on my main page.

Take a look here: http://www.b-a-k-e-r.com/main.php

Mine actually follows the mouse. You can take a look at my page source and see what I did to get it to work. My page is simple and clean so you should have no problems sorting it out.

The biggest problem you will have is grabbing an array of image names. I'm not doing that but I'll stick it in soon enough.

I'd just use php to grab the filenames out of a folder and create an array of the names. Then send the path + name to a function similar to mine.

Post back if you have questions or if you want me to elaborate further.

Arbitrator

03-09-2006, 01:00 PM

It shouldn't be against the policy to post web URLs here as long as it's on topic and not advertising. Anyway...

Using this script is very simple it seems. To clean things up a bit and make the script a bit more powerful, I rewrote it. You're going to need to save two of his images if you want to see this code in action out of the box:

http://www.funnygames.nl/layout/images/thumbnails/avontuur/2528.jpg
http://www.funnygames.nl/layout/images/background.gif

Create an HTML file, put those images in the same directory/folder, and put this code into the HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>



<meta http-equiv="content-language" content="en-us"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>test007</title>

<style type="text/css">

/***** General Styles
***********************************************************/
body {
background: #004d72 url(background.gif);
color: #fff;
font: 13pt Verdana, sans-serif;
}

a:link, a:visited, a:hover, a:active {
color: #fff;
}

/***** Styles for rollOverImage
***********************************************************/
div.rollOverImgStyle {
border: 1px solid #fff;
overflow: hidden;
visibility: hidden;
height: 74px;
width: 102px;
}

/***** This ID is for JavaScript use.
***********************************************************/
div#rollOverImgLoc1 {}

</style>

<script type="text/javascript">

function rollOverShow(locID,imgURL,imgHeight,imgWidth,imgTitle,imgAlt) {
document.getElementById(locID).innerHTML = "<img style=\"height: " + imgHeight + "; width: " + imgWidth + ";\" title=\"" + imgTitle + "\" alt=\"" + imgAlt + "\" src=\"" + imgURL + "\"\/>";
document.getElementById(locID).style.visibility = "visible";
document.getElementById(locID).style.height = imgHeight;
document.getElementById(locID).style.width = imgWidth;
}

function rollOverHide(locID) {
e = document.getElementById(locID);
e.innerHTML = "";

if (e.style) {
e.style.visibility = "hidden";
}
}

</script>

</head>
<body>

<div>




<a href="about:blank"
onMouseOver="rollOverShow('rollOverImgLoc1','2528.jpg','74px','102px','Alex in Danger Screenshot','Alex in Danger Screenshot');"
onMouseOut="rollOverHide('rollOverImgLoc1');">
Alex in Danger</a><br/><br/>

<div id="rollOverImgLoc1" class="rollOverImgStyle"></div>

</div>

</body>
</html>Tested in Firefox 1.5 and Internet Explorer 6 SP2.

Arbitrator

03-09-2006, 01:16 PM

It would be fairly easy to do this with pure CSS, although a script could offer some added functionality.

Your markup is a bit problematic, but inside each link you could include a span element with the desired image, which is absolutely positioned to the desired location and default set to display: none; when the link in question is hovered over, the :hover pseudoclass could be used to turn the display of the accompanying span to block, thus showing it.Interesting. I haven't messed with pseudo-classes yet, but maybe I could do that and forget "onMouseOver" and "onMouseOut" altogether; I ended up going with HTML 4.01 Strict in my example since those attributes are invalid in XHTML. Guess I'll have to experiment with the CSS method later.

I don't really see why you'd need to use absolute positioning though. Abs-pos always seems to be trouble for centered layouts, heh.

ronaldb66

03-09-2006, 01:40 PM

Because with the described approach the images are part of the links and will appear there if you don't alter their position.

If the container holding the links is positioned as well (position: relative with no offsets will accomplish this with no further consequences) it can serve as a positioning holder; in the example tek gave they were positioned near the top right corner of the containers, but this can be altered to taste; a special box in the heading could be created to move these images into.

tek

03-09-2006, 02:01 PM

I ended up doing this exact same thing on my main page.

Take a look here: http://www.b-a-k-e-r.com/main.php

Mine actually follows the mouse. You can take a look at my page source and see what I did to get it to work. My page is simple and clean so you should have no problems sorting it out.

This one is great for my website, 2 things though.
1: How can I make that image appear smaller, cuz I've tried editing those 260 x 260 thingy's and that just changes the images in that window
2: How can I make it appear on the right side of the mouse?

DSB

03-09-2006, 03:33 PM

Here is a condensed version of what is on my page.

I wrote it so feel free to copy it and use it as you see fit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

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

<style type="text/css">

#image
{
position: absolute; top: 0px; left: 0px; z-index: 1;
background-image: none;
filter: alpha(opacity=80); opacity: .85;
visibility: hidden
}

</style>

<script language="javascript" type="text/javascript">

function getMouseCoords(e)
{
var xPos = 0;
var yPos = 0;

if(!e) var e = window.event;

if(e.pageX || e.pageY)
{
xPos = e.pageX;
yPos = e.pageY;
}
else if(e.clientX || e.clientY)
{
xPos = e.clientX;
yPos = e.clientY;
}

return [xPos, yPos];
}

function showImage(e, sURL)
{
var coords = getMouseCoords(e);

var obj = document.getElementById('image');

obj.style.background = 'url('+sURL+')';

//obj.style.width = **some image width**
//obj.style.height = **some image height**

//<div> is rendered top left corner mapped to cursor tip.
obj.style.left = coords[0] + 15; //move left/right in x by subtracting/adding here
obj.style.top = coords[1] + 15; //move down/up in y by subtacting/adding here
obj.style.visibility = 'visible';
}

function hideImage()
{
var obj = document.getElementById('image');

obj.style.visibility = 'hidden';
obj.style.top = 0;
obj.style.left = 0;
}

</script>

</head>

<body>

<a href="some url" onmousemove="showImage(event, 'image url here')" onmouseout="hideImage()">
Mouse Over Me</a>

<div id="image" style="width: 256px; height: 256px"></div>

</body>

</html>

In regards to my shift of 260:

All my image were of the same size so I set a static value that was slightly larger than the image's width and height and subtracted the values from cursor position, effectively moving the <div> up and to the left.

I hope that better explains some of it. I added a few comment lines to show how you could change the size of the <div> for each image. You'd need to store the information in some kind of array and pass it in. If you were to have a large database of images then this would be no problem. You should store the image name, path, and size. All would be beneficial as it would allow more dynamic code.

tek

03-09-2006, 04:49 PM

_Aerospace_Eng_

03-09-2006, 07:37 PM

Interesting. I haven't messed with pseudo-classes yet, but maybe I could do that and forget "onMouseOver" and "onMouseOut" altogether; I ended up going with HTML 4.01 Strict in my example since those attributes are invalid in XHTML. Guess I'll have to experiment with the CSS method later.

I don't really see why you'd need to use absolute positioning though. Abs-pos always seems to be trouble for centered layouts, heh.
Because they too need to be lowercase as XHTML requires that all markup is lowercase except the doctype.

DSB

03-09-2006, 07:59 PM

ok, I'm using it now... but something weird is happening... it works for firefox, but it doesn't work for IE...

I added it, so whenever you hover over an orange box in front of a link you see the image (I only added this for the links "bubble trouble", "bow man" & "yeti sports 3" now as a test)

you can find the bubble trouble link in the "speed" category in the far left row, in the top15 games category in the far right row.
you can find bow man in the far right category (top15 games) as the nr.1 game on top

Yeah it seems that you will have to add an offset. IE isn't accounting for the page scroll it seems. I kinda expected that. I'll look into it when I get a chance and give you the info if you haven't figured it out.

IE uses one of the pageX/Y or the clientX/Y. Can't remember which one at the moment but whichever one it is, it doesn't include the amount of pixels scrolled. I'll try and find the info you will need to add in this function.

function getMouseCoords(e)
{
var xPos = 0;
var yPos = 0;

if(!e) var e = window.event;

if(e.pageX || e.pageY)
{
xPos = e.pageX;
yPos = e.pageY;
}
else if(e.clientX || e.clientY)
{
xPos = e.clientX;
yPos = e.clientY;
}

return [xPos, yPos];
}

There is one other thing I want to clarify if you haven't ran into this yet.
The CSS #image element at the top contains two opacity statements.

#image
{
position: absolute; top: 0px; left: 0px; z-index: 1;
background-image: none;
filter: alpha(opacity=80); opacity: .85;
visibility: hidden
}

The first one "filter: alpha(opacity=80)" is IE specific. It is a hack (workaround) to make sure the <div> is transparent.
The second one is actually the standard and this is the one Firefox uses.

Also there is a typo on my part.

The line should read: filter: alpah(opacity=80); opacity: .80

You can change the values to whatever suits you but make sure they are the equivalent of each other.

Example: filter: alpah(opacity=40); opacity: .40

Edit: Here, make these changes in the getMouseCoords() function and see if it fixes it:

function getMouseCoords(e)
{
var xPos = 0;
var yPos = 0;

if(!e) var e = window.event;

if(e.pageX || e.pageY)
{
xPos = e.pageX;
yPos = e.pageY;
}
else if(e.clientX || e.clientY)
{
xPos = e.clientX + document.body.scrollLeft;
yPos = e.clientY + document.body.scrollTop;
}

return [xPos, yPos];
}

tek

03-09-2006, 10:13 PM

it shows the image now :D

that's a good thing :D

but in IE the link isn't "clickable"

Edit: actually it is... but it doesn't show it as a link.

thanks A LOT for the image thingy though :D it's what I've been looking for, for a while now :D

DSB

03-09-2006, 10:40 PM

I'm not terribly sure if this will work but try adding this internal style in your document.

.cursor{ cursor: pointer; cursor: hand; }

See if that forces IE to show a hand over the link.

tek

03-09-2006, 11:19 PM

a hand appears but when the image appears, the hand goes away.

EDIT: I removed the line now (just so you know) cuz it slowed down the images loading time

DSB

03-10-2006, 04:46 AM

a hand appears but when the image appears, the hand goes away.

EDIT: I removed the line now (just so you know) cuz it slowed down the images loading time

That's fine, it was trial anyway. I'm guessing that IE is not setting the cursor after the mousemove call. There is probably a way to fix it but you have to ask yourself if it is worth it.

tek

03-10-2006, 11:11 AM

it's good the way it is now :D

thanks a lot :D

I only just began adding screenshots and it looks great already :)

DSB

03-11-2006, 07:04 AM

it's good the way it is now :D

thanks a lot :D

I only just began adding screenshots and it looks great already :)

Yep, looks good. I did notice a few things and would like to offer my advice.

First, the location in which you added the line:

<div id="image" style="width: 100px; height: 80px"></div>

is a bit strange. I would suggest moving it down to the very bottom of the page. Right before the </body> tag. It will be much easier to find it there if you need to reference it later.

Secondly, I noticed that you have changed a line in the hideImage() function.

From:

obj.style.visibility = 'hidden';

To:

obj.style.visibility = 'visible';

The effect of this being that the <div> is always visible.

I was just curious if you did this on purpose or on accident. :)