Help - Search - Members - Calendar
Full Version: link hover
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
rayyyy
Jun 28 2008, 06:19 PM
My links for my site are in my header banner. How would I make it so when I hover over those links something shows up.

thanks.
ForgiveTheSinner
Jun 28 2008, 06:29 PM
what do you mean by something?
rayyyy
Jun 28 2008, 06:32 PM
uhh an image? or change the colour? something along those lines. i just don't know how because my links are in an image map. i dont want to screw it up haha
tokyo-rose
Jun 28 2008, 06:33 PM
You should post your code.
rayyyy
Jun 28 2008, 06:36 PM
my whole code? or just my links?
tokyo-rose
Jun 28 2008, 06:58 PM
Your entire code. :)
rayyyy
Jun 28 2008, 07:08 PM
CODE
<html>
<head>

<title>Push Play Source// your #1 site for Push Play</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>



<body>
<!-- ... body of document ... -->

<body style="background: url(http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/backg.png); background-color: #ffffff; background-repeat:repeat;">
<div style="position: absolute; top: 0px; left: 280px;">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/header.png" border= 1px solid #000000; usemap="#nav">

<MAP NAME="nav">
<AREA SHAPE=RECT COORDS="520,146,668,164" HREF="http://www.pushplaysource.fanbased.net" ALT="Push Play Source// Your #1 Site for Push Play!">

<AREA SHAPE=RECT COORDS="519,174,668,192" HREF="http://www.pushplaysource.fanbased.net/pushplay.php" ALT="Push Play News & Updates">
<AREA SHAPE=RECT COORDS="516,198,668,216" HREF="http://www.pushplaysource.fanbased.net/gallery.php" ALT="Push Play Source's Gallery Coming Soon">
<AREA SHAPE=RECT COORDS="512,225,668,243" HREF="http://www.pushplaysource.fanbased.net/forum.php" ALT="Forum Coming Soon">
<AREA SHAPE=RECT COORDS="506,250,668,269" HREF="http://www.pushplaysource.fanbased.net/media.php" ALT="Graphics, Videos, Music">
<AREA SHAPE=RECT COORDS="511,276,668,296" HREF="http://www.pushplaysource.fanbased.net/site.php" ALT="About Push Play Source">
<AREA SHAPE=RECT COORDS="500,304,668,321" HREF="http://www.pushplaysource.fanbased.net/www.php" ALT="WWW">

</MAP>
</div>


<div class="content" style="position:absolute; width:467; z-index:2; left:278; top:455"><script type="text/javascript"><!--
google_ad_client = "pub-1421452112578246";
google_alternate_color = "FFFFFF";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text";
google_ad_channel = "2364410786";
google_color_border = "#ffffff";
google_color_bg = "#ffffff";
google_color_link = "#0000FF";
google_color_text = "#000000";
google_color_url = "#0000FF";
//-->
</script>

<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<div style="position:absolute; background: url(http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/backg.png); left:760px; top:455px; width:202px;border= 1px solid #000000; overflow: hidden; overflow-x: hidden;">

<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/welcome.png" >

</div>
<br>

<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/sitestats.png">

<b>Site Name:</b> Push Play Source<br>
<b>Owner:</b> Rachel<br>
<b>Co-Web:</b> Caitlyn<br>
<b>Hits:</b><!-- Start FastWebCounter.com -->
<a href="http://www.fastwebcounter.com" title="Free Web Counter"><script src="http://fastwebcounter.com/secure.php?s=www.pushplaysource.fanbsed.net"></script></a>
<!-- End FastWebCounter.com --><br>
<b>Opened:</b> April 7, 2008<br>
<b>Layout by:</b> Rachel<br>
<b>Version:</b> 1.0<br>
<b>Host:</b> <a href="http://www.fanbased.net">Fanbased</a><br>

</div>
<br>

<div class="side">
<h1>Navigation</h1>
<center>

<a class="navi" href="pushplay.php">Push Play</a>
<a class="navi" href="gallery.php">Gallery</a>
<a class="navi" href="media.php">Media</a>
<a class="navi" href="foryou.php">The Fans</a>
<a class="navi" href="site.php">Site/WWW</a>
</center>
</div>
<br>

<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/tourdates.png">
<marquee direction=up scrollamount=2>

</div>

<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/affiliates.png">


</div>
<br>


<div class="side">
<h1>Forum</h1>
<br><center>
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/pp-1.jpg" border="0"><Br>
Coming Soon!<br>
</center>
</div>
<br>


<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/pplinks.png">

</div>
<br>

<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/cbox.png">

</div>
<br>

<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/listedat.png">
<br>

</div>
<br>

<div class="side">
<img src="http://i12.photobucket.com/albums/a208/Rachel_891/Push%20Play%20Source/DISCLAIMER.png">
<br>
We are not Push Play, we are in no way affiliated with Push Play or their management. We are simply just a fansite.
© 2008 Push Play Source
<br>




<div style="position:absolute; background-color:#6d6c6c; left:271px; top:578px; width:500px;border:1px; overflow: auto; overflow-x: hidden;">
<div class="content">

</div>




</body>
</html>

</div></center>
</div>
<br>
<br>
<br>




</body>
</html>




sorry its so long. i tried to delete some of the unnecessary stuff haha
ForgiveTheSinner
Jun 28 2008, 07:41 PM
can you put a link of a page up so I can see what you have at the moment?

you want rollovers? is that what you meant by something?
rayyyy
Jun 28 2008, 07:53 PM
yeah that's what i want. like when you hover over a link it will show like an image on top.

i cant show you a link because it isn't actually on site right now.

i will link you to the header where the links are

Header
ForgiveTheSinner
Jun 28 2008, 08:53 PM
You have to do that on ImageReady, at least thats what I use.

Do you have the image of the header with the rollovers?
fixtatik
Jun 28 2008, 10:36 PM
if you're using an image map for the links, i don't believe it's possible to do roll overs.

basically, what you'll need to do is just slice the images into pieces, and align them in the format of the original image. that way, you can do rollovers.
Melissa
Jun 29 2008, 12:23 AM
^ yeah, it is possible for image maps. The only problem you'll have is that your rollover won't work for Opera (as I've come to find out)

Here's a script if you're planning to use image maps. This also works if you splice your image:

What you'll need is your original picture; copy that as many times as you have links. For each new copy, you'll want to edit out the part that's going to change, then load the original and copies in this script.

CODE
<script language="javascript">
<!-- hide script from old browsers

//detect browser:
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3) browserVer = "1";
else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) browserVer = "1";
else browserVer = "2";

//preload images:
if (browserVer == 1) {
a1 = new Image(WIDTH,HEIGHT);
a1.src = "ORIGINAL/BASE IMAGE SRC URL";
a2 = new Image(WIDTH,HEIGHT);
a2.src = "IMAGE 2 SRC URL";
a3 = new Image(WIDTH,HEIGHT);
a3.src = "IMAGE 3 SRC URL";
}

//image swapping function:
function hiLite(imgDocID, imgObjName, comment) {
if (browserVer == 1) {
document.images[imgDocID].src = eval(imgObjName + ".src");
window.status = comment; return true;
}}
//end hiding -->
</script>


Change the "IMG SRC URL" and the "WIDTH, HEIGHT" to your own categories and add as many as you need past "a3"

Now, take your original/base image and put in your image map like this:

CODE
<img src="ORIGINAL IMAGE SRC NAME" name="a" usemap="#NAME">
<map name="NAME">
<area shape="poly" coords="[enter coords]" href="URL" onMouseOver="hiLite('a','a2','')" onMouseOut="hiLite('a','a1',''>
<area shape="poly" coords="[enter coords]" href="URL" onMouseOver="hiLite('a','a3','')" onMouseOut="hiLite('a','a1',''>
</map>


What it does is take your image, then swap it for your alternative image on the "mouseover" for the image map, then swap it back to the original on the "mouseout"

This code works for Firefox and IE and Safari (I'm pretty sure). Thomas couldn't see my rollovers, so I guess it doesn't work for Opera.
fixtatik
Jun 29 2008, 03:19 AM
nifty...i'm not extremely keen on javascript; it's good to learn something =)

although, i think in the case of using this image with that script it would seriously suck. it's loading a separate image each time, and that image is already half a megabyte.

to the original poster, i highly suggest compressing the image considerably. while it's hard to believe, there are still people in the world who use dial up (personally, i only switched about 8 months ago). and from personal experience, a picture of that size would probably take about three minutes to download. with seven different images you'll be using (if you plan on doing rollovers with an image map), visitors will have to download seven different images that are half a megabyte.

i might be wrong, but i don't think people will wait three minutes for a link to show up.

unless you compress it down to at the most 20KB, i'll stick with my suggestion about slices.

of course, now that i think of it, there may be a way to apply the "onmouseover" script to request only an image of that specific link.
Melissa
Jun 29 2008, 03:05 PM
^ i'm pretty sure the script preloads all the images while the page loads; I've never had trouble with the links showing up slowly.
fixtatik
Jun 29 2008, 03:21 PM
^ that makes sense. it still would be a problem for dial up users, though, since most people don't usually spend more than a minute on a page.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.