Log In · Register

 
 
 Reply to this topicStart new topic
link hover
rayyyy
post Jun 28 2008, 06:19 PM
Post #1


Senior Member
***

Group: Member
Posts: 79
Joined: Oct 2007
Member No: 583,422
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
post Jun 28 2008, 06:29 PM
Post #2


Senior Member
*****

Group: Member
Posts: 786
Joined: Dec 2006
Member No: 488,341
what do you mean by something?
 
rayyyy
post Jun 28 2008, 06:32 PM
Post #3


Senior Member
***

Group: Member
Posts: 79
Joined: Oct 2007
Member No: 583,422
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
post Jun 28 2008, 06:33 PM
Post #4


Senior Member
********

Group: Head Staff
Posts: 18,173
Joined: Mar 2005
Member No: 108,478
You should post your code.
 
rayyyy
post Jun 28 2008, 06:36 PM
Post #5


Senior Member
***

Group: Member
Posts: 79
Joined: Oct 2007
Member No: 583,422
my whole code? or just my links?
 
tokyo-rose
post Jun 28 2008, 06:58 PM
Post #6


Senior Member
********

Group: Head Staff
Posts: 18,173
Joined: Mar 2005
Member No: 108,478
Your entire code. :)
 
rayyyy
post Jun 28 2008, 07:08 PM
Post #7


Senior Member
***

Group: Member
Posts: 79
Joined: Oct 2007
Member No: 583,422
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
post Jun 28 2008, 07:41 PM
Post #8


Senior Member
*****

Group: Member
Posts: 786
Joined: Dec 2006
Member No: 488,341
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
post Jun 28 2008, 07:53 PM
Post #9


Senior Member
***

Group: Member
Posts: 79
Joined: Oct 2007
Member No: 583,422
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
post Jun 28 2008, 08:53 PM
Post #10


Senior Member
*****

Group: Member
Posts: 786
Joined: Dec 2006
Member No: 488,341
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
post Jun 28 2008, 10:36 PM
Post #11


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
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
post Jun 29 2008, 12:23 AM
Post #12


;)
******

Group: Duplicate
Posts: 2,374
Joined: Feb 2004
Member No: 3,760
^ 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
post Jun 29 2008, 03:19 AM
Post #13


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
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
post Jun 29 2008, 03:05 PM
Post #14


;)
******

Group: Duplicate
Posts: 2,374
Joined: Feb 2004
Member No: 3,760
^ 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
post Jun 29 2008, 03:21 PM
Post #15


Senior Member
******

Group: Member
Posts: 1,237
Joined: May 2008
Member No: 648,123
^ 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.
 
« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic