How to reveal a picture when hover on link?

  • isthistakenyet?
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Burnley U.K.

Post 3+ Months Ago

I was wondering how i could reveal a picture when someone hovers on one of my links, i have seen it used on <a href="http://www.angelfire.com/retro/blackmanta/index2.html">this</a> site but they use pictures, how could this be done with a link instead of a picture though??
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • theak
  • Proficient
  • Proficient
  • User avatar
  • Posts: 438
  • Loc: Taipei, Taiwan

Post 3+ Months Ago

In Javascript you could achieve the same kind of effect by using a onmouseOver trigger to call a function that changes the image.
  • isthistakenyet?
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Burnley U.K.

Post 3+ Months Ago

Thanks for the tip, i skimmed through a couple of Javascript tutorials i found on google and came up with the following code:
Code: [ Select ]
<a href="main.html" onMouseOver="document.body.background='backgroundpic.GIF'">link</a>

It works great and was just what i was looking for, you can view the script in action <a href="http://free.hostdepartment.com/s/santaisahindu/unicoder/entrance.html">here</a>
  • Carnix
  • Guru
  • Guru
  • User avatar
  • Posts: 1098

Post 3+ Months Ago

No we can't:

404 File Not Found
The member's page which you were trying to access is not available. It could be moved to someplace else.

.c
  • isthistakenyet?
  • Beginner
  • Beginner
  • User avatar
  • Posts: 48
  • Loc: Burnley U.K.

Post 3+ Months Ago

Sorry about that, i organised all the files on my site yesterday and put everything in new folders, i forgot to edit my post with the new url though, o well, it should work now.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13502
  • Loc: Florida

Post 3+ Months Ago

Your method is (for lack of a friendlier word) wastefull :wink:
it would save quite a bit of bandwidth & reduce lag of switching the backgrounds on slower connections to set the page background to stay white, while creating two absolutely positioned, 100%width/height, z-indexed, visibility:hidden DIVs with the backgrounds set accordingly that you can just toggle visibility of with a compact function call in your hrefs (as oposed to document.body.soOn in each)

Here's an example of what i'm blabbering about.

Use CSS to define the attributes of our hidden backgrounds.
Code: [ Select ]
body {background:#fff;}
div#bga,div#bgb {position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%; visibility:hidden; background:url("path/to/background_a.gif");}

div#bgb {background:url("path/to/background_b.gif");}
  1. body {background:#fff;}
  2. div#bga,div#bgb {position:absolute; left:0px; top:0px; z-index:-1; width:100%; height:100%; visibility:hidden; background:url("path/to/background_a.gif");}
  3. div#bgb {background:url("path/to/background_b.gif");}

The first part sets up both divs, the second overides the background attribute for bgb. Note the div# before each one, this tells browsers that theese are "special attributes" that only get applied to DIVs with IDs of bga or bgb & to leave any other kind of element or CLASSES (.bga{}) with theese names alone.

Now to get theese hidden backgrounds into our page & since we positioned them absolute, z-indexed them earlier we can toss what's below almost anywhere between the <body></body> tags.
Code: [ Select ]
<div id="bga"></div>
<div id="bgb"></div>
  1. <div id="bga"></div>
  2. <div id="bgb"></div>

By now you may be wondering "what does all of this have to do with a javascript imageSwap ?!?"
With that in mind we take a look at a javascript function for toggling visibility of our hidden backgrounds.
Code: [ Select ]
onNow = false;
function swap(eId){
 if(eId){
  document.getElementById(eId).style.visibility = "visible";
  onNow = eId;
 }else{
  document.getElementById(onNow).style.visibility = "hidden";
  onNow = false;
 }
}
  1. onNow = false;
  2. function swap(eId){
  3.  if(eId){
  4.   document.getElementById(eId).style.visibility = "visible";
  5.   onNow = eId;
  6.  }else{
  7.   document.getElementById(onNow).style.visibility = "hidden";
  8.   onNow = false;
  9.  }
  10. }

Before we get into how this works let's take a look at some hrefs that call this function,
Code: [ Select ]
<a href="../index.htm" onmouseover="swap('bga')" onmouseout="swap(false)">Up One Level</a>

<a href="stuff/" onmouseover="swap('bgb')" onmouseout="swap(false)">Stuff</a>

<a href="dirN/" onmouseover="swap('bgN')" onmouseout="swap(false)">Link #N</a>
  1. <a href="../index.htm" onmouseover="swap('bga')" onmouseout="swap(false)">Up One Level</a>
  2. <a href="stuff/" onmouseover="swap('bgb')" onmouseout="swap(false)">Stuff</a>
  3. <a href="dirN/" onmouseover="swap('bgN')" onmouseout="swap(false)">Link #N</a>

Notice bgN ? Expansion of backgrounds with this function is limited only by imagination/the size of your hosting package.
Adding new backgrounds consists of appending div#bgN to the list in the first part of our CSS, defining the image in the second part of CSS & adding <div id="bgN"></div> in our body.
Ok now to explain the function with href calls to it.

Calling our function with a quoted element id onmouseover causes this element to become visible & the element id to be stored in a global variable named onNow for the mouseout to use.

Calling our function with an unquoted value of false onmouseout causes the element whos name is stored in variable onNow to become hidden.

While with only two backgrounds it would be easy just to create a hardcode swap function, What I have attempted to explain leaves rom for expansion/re-application in the future :wink:
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

joebert wrote:
while creating two absolutely positioned, 100%width/height, z-indexed, visibility:hidden DIVs with the backgrounds set accordingly that you can just toggle visibility of with a compact function call in your hrefs (as oposed to document.body.soOn in each)


well, if you are going to do it that way, I have two words for you:

no javascript.

Adapt <a href="http://www.meyerweb.com/eric/css/edge/popups/demo.html" target="_blank">this</a> and you can do it with pure CSS

Then it is even less wasteful, even more bandwidth friendly and does not require the UA to have javascript switched on

:wink:

Plus it has the advantage of anyone looking at your code will be confused as hell if they see no javascript :D

//PS I love CSS

Post Information

  • Total Posts in this topic: 7 posts
  • Users browsing this forum: ScottG and 67 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.