...

View Full Version : Image Rollovers



Ecstasy.
07-20-2008, 06:39 AM
Hi,
This is the image that I'm trying to work with:

http://ecstasy.xiui.net/hawkming/Taiwan%20Map.gif

What I want to do is instead of the 3 boxes being part of the image, I want to make them rollovers.
So when you hover over a bird silouhette, a box will appear on top of the map which might look something like this:

http://ecstasy.xiui.net/hawkming/Hsinchu%20Over.gif

I sliced the first image so that the birds can be "links" but when I played around with some rollovers codes, the 2nd image would push the 1st image apart.

Does anybody know how I can get this to work?
Thanks.

ShaneC
07-20-2008, 09:19 AM
First of all welcome to CF!

Here is a great tutorial: http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/.

Check that out and let us know if you're having further problems with it.

Ecstasy.
07-21-2008, 11:47 AM
Thanks for the reply.

However, I don't really understand the coding. How would that allow the different images to appear while hovering over the different silhouettes?

ninnypants
07-21-2008, 04:44 PM
This just preloads the image to the cach so that your navigation doesn't blink on roll over:


a { background: url(image_hover.gif); }

Then this section changes the links origional background to the default image:


a:link { background: url(image_default.gif); }

and this last bit just creates the roll over effect by replacing the default background with the one in the cach.


a:hover,
a:focus { background: url(image_hover.gif); }

Ecstasy.
07-22-2008, 01:26 PM
But how would that make each individual bird "hover-able" and when a different bird is hovered, a different image replaces the ENTIRE old image, not just the bird?

Sorry but I'm really confused. x_x

ninnypants
07-22-2008, 04:29 PM
You would have to signify each bird like this


a#bird1 { background: url('bird1_hover.gif'); }
a#bird1:link { background: url('image_default.gif'); }
a#bird1:hover,
a#bird1:focus { background: url('bird1_hover.gif'); }

a#bird2 { background: url('bird2_hover.gif'); }
a#bird2:link { background: url('image_default.gif'); }
a#bird2:hover,
a#bird2:focus { background: url('bird2_hover.gif'); }


That way you could single out every bird and give it a specific image.

Do you have any code that you can post so that we may be able to give more specific help?

Mr J
07-22-2008, 09:52 PM
Try the attached image map example, see if it is any help

Ecstasy.
07-23-2008, 11:26 AM
ninnypants:
I tried to follow what you said and ended up with this --

CSS =
a.Hsinchu { background: url('/hawkming/Hsinchu Over.gif'); }
a.Hsinchu:link { background: url('/hawkming/Taiwan Map.gif'); }
a.Hsinchu:hover,
a.Hsinchu:focus { background: url('/hawkming/Hsinchu Over.gif'); }

HTML =
<a href="" class="Hsinchu"><img src="/hawkming/Hsinchu.gif" width="41" height="41" alt="" border="0"></a>

Anything wrong with it? Because it doesn't work.

Mr J:
I copied your code and for some reason, only "And Message 3" showed up, the other two didn't. Also, how can I make it an image instead of a message?

Thank you both for your replies.

ninnypants
07-23-2008, 04:55 PM
I made some changes to accomplish this you needed JavaScript not CSS. I added a "chng_bg" function that should change your images for you. You'll need a Image with each bird highlighted or whatever you want them to do when hovered. I also edited Mr J's function so that you can use more than one DIV



<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>



<script type="text/javascript">
//preloads images so that they don't blink
var def = new Image();
var bird1 = new Image();
var bird2 = new Image();
var bird3 = new Image();
//the source for you image states
def.src = "taiwan.jpg"//default
bird1.src = "taiwan_1.jpg"//hovering over bird 1
bird2.src = "taiwan_2.jpg"//hovering over bird 2
bird3.src = "taiwan_3.jpg"// hovering over bird 3

function chng_bg(img){
document.taiwan.src = img;
}
//I changed this function so that you could use more than one div
//and place them where ever you want on the page using the same fashon as "d1"
function test(m,id){
document.getElementById(id).innerHTML=m
//does the same this as before
curr = document.getElementById(id).style.display;
document.getElementById(id).style.display = (curr == 'none'?'block':'none');
}


</script>


<div style="position:relative">
<img src="taiwan.jpg" name="taiwan" usemap="#mapname" style="border:0">

<map name="mapname">
<AREA SHAPE="RECT" coords="121,73,160,110" href="your page.htm" alt="your message here" onmouseover="test('This is message 1','d1'); chng_bg(bird1.src);" onmouseout="test('','d1'); chng_bg(def.src);">
<AREA SHAPE="RECT" coords="68,156,103,188" href="your page.htm" alt="your message here" onmouseover="test('Message 2','d1'); chng_bg(bird2.src)" onmouseout="test('','d1'); chng_bg(def.src);">
<AREA SHAPE="RECT" coords="40,367,180,402" href="your page.htm" alt="your message here" onmouseover="test('And message 3','d1'); chng_bg(bird3.src)" onmouseout="test('','d1'); chng_bg(def.src);">
</map>

<div id="d1" style="position:absolute;left:50;top:250;width:150px;height:50px;border:1px solid black;display:none;background-color:#FFFFFF"></div>


</BODY>
</HTML>

ninnypants
07-23-2008, 04:59 PM
You can also change it to an image by using the id of an image instead of the id of a div

Ecstasy.
07-24-2008, 08:39 AM
Thank you, ninnypants.
Hopefully this is my last question...
So far, my code looks like this:

<html>
<head>
<title></title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script type="text/javascript">
//preloads images so that they don't blink
var def = new Image();
var Hsinchu = new Image();
var Taichung = new Image();
var Kaohsiung = new Image();
//the source for you image states
def.src = "/hawkming/Taiwan Map.png"//default
Hsinchu.src = "/hawkming/Hsinchu Over.gif"//hovering over bird 1
Taichung.src = "/hawkming/Taichung Over.gif"//hovering over bird 2
Kaohsiung.src = "/hawkming/Kaohsiung Over.gif"// hovering over bird 3

function chng_bg(img){
document.taiwan.src = img;
}
//I changed this function so that you could use more than one div
//and place them where ever you want on the page using the same fashon as "d1"
function test(m,id){
document.getElementById(id).innerHTML=m
//does the same this as before
curr = document.getElementById(id).style.display;
document.getElementById(id).style.display = (curr == 'none'?'block':'none');
}


</script>


<div style="position:relative">
<img src="/hawkming/Taiwan Map.png" name="taiwan" usemap="#mapname" style="border:0">

<map name="mapname">
<AREA SHAPE="RECT" coords="121,73,160,110" href="your page.htm" alt="your message here" onmouseover="chng_bg(Hsinchu.src);" onmouseout="chng_bg(def.src);">
<AREA SHAPE="RECT" coords="68,156,103,188" href="your page.htm" alt="your message here" onmouseover="chng_bg(Taichung.src)" onmouseout="chng_bg(def.src);">
<AREA SHAPE="RECT" coords="40,367,180,402" href="your page.htm" alt="your message here" onmouseover="chng_bg(Kaohsiung.src)" onmouseout="chng_bg(def.src);">
</map>

<div id="d1" style="position:absolute;left:50;top:250;width:150px;height:50px;border:1px solid black;display:none;background-color:#FFFFFF"></div>


</body>
</html>

Did I change the right things?
Right now, only the last one works and I don't know why.

http://ecstasy.xiui.net/hawkming/3.php

auslin
07-25-2008, 10:59 AM
Hi,

This seems to work fine (in both IE7 and FF2) if a couple of minor things are corrected:



</map>
<div id="d1" style="position:absolute;left:50px;top:250px;width:150px;height:50px;border:1px solid black;display:none;background-color:#FFFFFF"></div>
</div>
</body>
</html>


The initial wrapper div was not closed, perhaps accounting for the erratic behaviour. If your image paths are correct, it should run OK.


Just noticed something else - those 4 invalid margin attributes on the body tag should be removed.

Ecstasy.
07-25-2008, 01:13 PM
It works!
Thank you so much ninnypants and auslin! =D

Ecstasy.
07-26-2008, 01:34 PM
Ugh. I've encountered yet another problem. x_x
I'm trying to make a page where the navigation buttons are rollovers as well, like the image before. (this is on the same page -- so navigation and then the map is part of the content on that page)
However, I tried to use that code again and it ended up making neither of them work.



<html>
<head>

<title></title>

</head>

<body bgcolor="#18294b">

<script type="text/javascript">

var def = new Image();
var Hsinchu = new Image();
var Taichung = new Image();
var Kaohsiung = new Image();
var Link 1 = new Image();
var Link 2 = new Image();
var Link 3 = new Image();
var Link 4 = new Image();
var Link 5= new Image();
var Link 6 = new Image();
var Link 7 = new Image();
var Link 1 Over = new Image();
var Link 2 Over = new Image();
var Link 3 Over = new Image();
var Link 4 Over = new Image();
var Link 5 Over = new Image();
var Link 6 Over= new Image();
var Link 7 Over = new Image();

def.src = "/hawkming/Taiwan Map.png"
Hsinchu.src = "/hawkming/Hsinchu Over.gif"
Taichung.src = "/hawkming/Taichung Over.gif"
Kaohsiung.src = "/hawkming/Kaohsiung Over.gif"
Link 1.src = "/hawkming/Link 1.gif"
Link 2.src = "/hawkming/Link 2.gif"
Link 3.src = "/hawkming/Link 3.gif"
Link 4.src = "/hawkming/Link 4.gif"
Link 5.src = "/hawkming/Link 5.gif"
Link 6.src = "/hawkming/Link 6.gif"
Link 7.src = "/hawkming/Link 7.gif"
Link 1 Over.src = "/hawkming/Link 1 Over.gif"
Link 2 Over.src = "/hawkming/Link 2 Over.gif"
Link 3 Over.src = "/hawkming/Link 3 Over.gif"
Link 4 Over.src = "/hawkming/Link 4 Over.gif"
Link 5 Over.src = "/hawkming/Link 5 Over.gif"
Link 6 Over.src = "/hawkming/Link 6 Over.gif"
Link 7 Over.src = "/hawkming/Link 7 Over.gif"


function chng_bg(img){
document.taiwan.src = img;
}
function chng_bg(img){
document.Navigation.src = img;
}


function test(m,id){
document.getElementById(id).innerHTML=m

curr = document.getElementById(id).style.display;
document.getElementById(id).style.display = (curr == 'none'?'block':'none');
}


</script>

<div style="text-align: center; top: 0px"><img src="/hawkming/Header.png" name="Navigation" usemap="#Navigation" style="border:0"></div>
<map name="Navigation">
<AREA SHAPE="RECT" coords="120,232,213,260" href="/hawkming/1.php" onmouseover="chng_bg(Link 1.src);" onmouseout="chng_bg(def2.src);">
<AREA SHAPE="RECT" coords="216,232,310,260" href="/hawkming/2.phpl" onmouseover="chng_bg(Link 2.src)" onmouseout="chng_bg(def3.src);">
<AREA SHAPE="RECT" coords="312,232,405,260" href="/hawkming/3.php" onmouseover="chng_bg(Link 3.src)" onmouseout="chng_bg(def4.src);">
<AREA SHAPE="RECT" coords="407,232,502,260" href="/hawkming/4.php" onmouseover="chng_bg(Link 4.src);" onmouseout="chng_bg(def5.src);">
<AREA SHAPE="RECT" coords="503,232,597,260" href="/hawkming/5.php" onmouseover="chng_bg(Link 5.src)" onmouseout="chng_bg(def6.src);">
<AREA SHAPE="RECT" coords="600,232,694,260" href="/hawkming/6.php" onmouseover="chng_bg(Link 6.src)" onmouseout="chng_bg(def7.src);">
<AREA SHAPE="RECT" coords="695,232,790,260" href="/hawkming/7.php" onmouseover="chng_bg(Link 7.src)" onmouseout="chng_bg(def8.src);">
</map>

<center>
<div class="content">
<div style="background-image: url(/hawkming/Background.gif); background-repeat: repeat-y; background-position: center;">

<div style="position:relative">
<img src="/hawkming/Taiwan Map.png" name="taiwan" usemap="#Taiwan Map" style="border:0">

<map name="Taiwan Map">
<AREA SHAPE="RECT" coords="215,72,255,115" href="#null" onmouseover="chng_bg(Hsinchu.src);" onmouseout="chng_bg(def.src);">
<AREA SHAPE="RECT" coords="161,154,200,196" href="#null" onmouseover="chng_bg(Taichung.src)" onmouseout="chng_bg(def.src);">
<AREA SHAPE="RECT" coords="128,367,173,408" href="#null" onmouseover="chng_bg(Kaohsiung.src)" onmouseout="chng_bg(def.src);">
</map>

</div>
</div>
</div>
</center>
</body>
</html>

Does anybody know what's wrong?
Thanks.

Mr J
07-26-2008, 09:51 PM
Remove the space from the variables

Example:

var Link 1

var Link 1 Over

chng_bg(Link 1.src)

to

var Link1

var Link1Over

chng_bg(Link1.src)


Sorry about the mistakes in my last example

ninnypants
07-27-2008, 02:58 AM
If the links each have their own image you could us the CSS from before for those. The reason it wouldn't work is because you were doing it for an area instead of an anchor element.

Ecstasy.
07-27-2008, 06:04 AM
Mr J : I took out the spaces but I don't think it did anything...
And it's alright. :)

ninnypants : What do you mean? Should I change it to something like:

<a href="/hawkming/1.php" onmouseover="chng_bg(Link1Over.src);" onmouseout="chng_bg(Link1.src);"><img src="/hawkming/Link1.gif"><a/>

Would that work? And keep the javascript the way it was in my previous post?

Mr J
07-27-2008, 09:50 AM
In the code you posted, besides the spaces in the variables, you have 2 functions with the same name also I only see def.src declared and not for

def2.src
def3.src
def4.src
def5.src
def6.src
def7.src
def8.src

Ecstasy.
07-27-2008, 03:52 PM
Okay, let me try again...



<html>
<head>

<title></title>

</head>

<body bgcolor="#18294b">

<script type="text/javascript">

var def = new Image();
var Hsinchu = new Image();
var Taichung = new Image();
var Kaohsiung = new Image();
var Link1 = new Image();
var Link2 = new Image();
var Link3 = new Image();
var Link4 = new Image();
var Link5= new Image();
var Link6 = new Image();
var Link7 = new Image();
var Link1Over = new Image();
var Link2Over = new Image();
var Link3Over = new Image();
var Link4Over = new Image();
var Link5Over = new Image();
var Link6Over= new Image();
var Link7Over = new Image();

def.src = "/hawkming/Taiwan Map.png"
Hsinchu.src = "/hawkming/Hsinchu Over.gif"
Taichung.src = "/hawkming/Taichung Over.gif"
Kaohsiung.src = "/hawkming/Kaohsiung Over.gif"
Link1.src = "/hawkming/Link1.gif"
Link2.src = "/hawkming/Link2.gif"
Link3.src = "/hawkming/Link3.gif"
Link4.src = "/hawkming/Link4.gif"
Link5.src = "/hawkming/Link5.gif"
Link6.src = "/hawkming/Link6.gif"
Link7.src = "/hawkming/Link7.gif"
Link1Over.src = "/hawkming/Link1Over.gif"
Link2Over.src = "/hawkming/Link2Over.gif"
Link3Over.src = "/hawkming/Link3Over.gif"
Link4Over.src = "/hawkming/Link4Over.gif"
Link5Over.src = "/hawkming/Link5Over.gif"
Link6Over.src = "/hawkming/Link6Over.gif"
Link7Over.src = "/hawkming/Link7Over.gif"

function chng_bg(img){
document.taiwan.src = img;
}
function chng_bg(img){
document.Navigation.src = img;
}

function test(m,id){
document.getElementById(id).innerHTML=m

curr = document.getElementById(id).style.display;
document.getElementById(id).style.display = (curr == 'none'?'block':'none');
}


</script>

<div style="text-align: center; top: 0px"><img src="/hawkming/Headera.png" name="Navigation" usemap="#Navigation" style="border:0"></div>
<center>
<map name="Navigation">
<a href="/hawkming/1.php" onmouseover="chng_bg(Link1Over.src);" onmouseout="chng_bg(Link1.src);"><img src="/hawkming/Link1.gif"></a>
<a href="/hawkming/2.phpl" onmouseover="chng_bg(Link2Over.src)" onmouseout="chng_bg(Link2src);"><img src="/hawkming/Link2.gif"></a>
<a href="/hawkming/3.php" onmouseover="chng_bg(Link3Over.src)" onmouseout="chng_bg(Link3.src);"><img src="/hawkming/Link3.gif"></a>
<a href="/hawkming/4.php" onmouseover="chng_bg(Link4Over.src);" onmouseout="chng_bg(Link4.src);"><img src="/hawkming/Link4.gif"></a>
<a href="/hawkming/5.php" onmouseover="chng_bg(Link5Over.src)" onmouseout="chng_bg(Link5.src);"><img src="/hawkming/Link5.gif"></a>
<a href="/hawkming/6.php" onmouseover="chng_bg(Link6Over.src)" onmouseout="chng_bg(Link6.src);"><img src="/hawkming/Link6.gif"></a>
<a href="/hawkming/7.php" onmouseover="chng_bg(Link7Over.src)" onmouseout="chng_bg(Link7.src);"><img src="/hawkming/Link7.gif"></a>
</map>
</center>



<center>
<div class="content">
<div style="text-align: center"><img src="/hawkming/Headerb.png"></div>
<div style="background-image: url(/hawkming/Background.gif); background-repeat: repeat-y; background-position: center;">

<div style="position:relative">
<img src="/hawkming/Taiwan Map.png" name="taiwan" usemap="#Taiwan Map" style="border:0">

<map name="Taiwan Map">
<AREA SHAPE="RECT" coords="215,72,255,115" href="#null" onmouseover="chng_bg(Hsinchu.src);" onmouseout="chng_bg(def.src);">
<AREA SHAPE="RECT" coords="161,154,200,196" href="#null" onmouseover="chng_bg(Taichung.src)" onmouseout="chng_bg(def.src);">
<AREA SHAPE="RECT" coords="128,367,173,408" href="#null" onmouseover="chng_bg(Kaohsiung.src)" onmouseout="chng_bg(def.src);">
</map>

</div>
</div>
</div>

</center>
</body>
</html>

Both the map and navigation still don't work properly.
http://ecstasy.xiui.net/hawkming/3.php

ninnypants
07-27-2008, 04:52 PM
You can now use this code for your links because that's what it is meant for.


a.Hsinchu { background: url('/hawkming/Hsinchu Over.gif'); }
a.Hsinchu:link { background: url('/hawkming/Taiwan Map.gif'); }
a.Hsinchu:hover,
a.Hsinchu:focus { background: url('/hawkming/Hsinchu Over.gif'); }

Mr J
07-27-2008, 11:16 PM
You still have 2 functions called chng_bg

Ecstasy.
07-28-2008, 08:00 AM
ninnypants : I still can't get it to work with that code. Here's what I have...



CSS:
a.Link1 { background: url('/hawkming/Link1Over.gif'); }
a.Link1:link { background: url('/hawkming/Link1.gif'); }
a.Link1:hover,
a.Link1:focus { background: url('/hawkming/Link1Over.gif'); }


and...


HTML:
<a href="/hawkming/1.php" class="Link1"><img src="/hawkming/Link1.gif"></a>


Mr J : What would I change it to then? Just an arbitrary name?

ninnypants
07-28-2008, 04:02 PM
Change the html of your links to look like this:


<a href="/hawkming/1.php" class="Link1"><span>link text</span></a>

and add this very first line to your CSS then it should work.


a.link1 span{display:none;}
a.Link1 { background: url('/hawkming/Link1Over.gif'); }
a.Link1:link { background: url('/hawkming/Link1.gif'); }
a.Link1:hover,
a.Link1:focus { background: url('/hawkming/Link1Over.gif'); }


The problem was that your image that was being used for a link was covering up the background image that you were changing.

Ecstasy.
07-28-2008, 04:54 PM
I copied the code you posted but nothing shows up.

http://ecstasy.xiui.net/hawkming/3.php

Mr J
07-28-2008, 05:20 PM
Change the second function to something like chng_bg2(img)

It no wonder there is some confusion here because you started of using an image map and now you've change to links nested in image map tags

ninnypants
07-28-2008, 06:14 PM
Sorry I forgot one part. You need to also change


a.Link1 { background: url('/hawkming/Link1Over.gif'); }

to:


a.Link1 { background: url('/hawkming/Link1Over.gif'); width:111px; height:111px;}

and make the width and height the size of the image.

Ecstasy.
07-29-2008, 03:53 PM
I ended up making it an image map again and it works now!

Thank you so much Mr J & ninnypants. :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum