Miscellaneous Classroom Tips from Al Futrell
Random header image... Refresh for more!

Posts from — January 2014

Simple “Disjointed” Rollover Effect

The web is full of solutions for doing mouseovers or rollovers.  Used to be that you had to use Javascript to get the effect, but now you can get the job done with CSS.  Well, er, I suppose most people can.  I could not.  That is, I couldn’t get exactly what I wanted.  What I wanted was to be able to mouseover a link in column one of a web page and have a photograph appear in column three.  I am sure there is a way to do this with CSS but I just couldn’t conceptualize it.

So I resorted to javascript and got the job done.  It really is easy once you think for a second or two.

Here is the javascript function I am using:


function seeIt(id,switch) {
if (switch=="1"){
//the next two lines are in case user has an old browser
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility =
"visible"
}
else
if (switch=="0"){
//again, check for old browsers in the next two lines
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility =
"hidden"
}
}

The first part of the function checks to see whether the user has dragged the mouse over a link. It does so by checking the value of the parameter “switch”.  If switch is on (i.e., it equals 1), then the script will assign the “visibility” property to the html element with the proper “id”. The second half of the script checks to see if a mouseout (that is, the switch equals 0) has been executed, and if so then it hides the image again.

I use this script because it allows me to show the image in whatever element on the page that I choose. All I have to do is send the desired element’s “id” to the function as the “id” parameter. In the HTML below I use a “<div>” element inside of the column-three <div> element to accomplish this.


<div id = "column-one">
<h3>Column One Header</h3>  <a href="url" onMouseOver = "seeIt('myid',1)"; onMouseOut="seeIt('myid',0)">Go to Link</a>
</div>


<div id="column-two">
<h3>Column Two Header</h3>
<p>Some other text</p>
</div>

<div "column-three"">
<h3>Column Three Header</h3>
<div id="myid"><img = src="myimage.png" width="100" height="100" alt="My Image" /></div></div>

Now, in our <style> element we need the following declaration:

#myid { position:absolute;  visibility:hidden }

This declaration makes sure the initial state of the image is hidden.  The position must be absolute for this to work.

With the javascript in place, the html well-formed, and the style sheet all set we can render the page and then mouseover the “Go to Link” link and the myimage.png image will appear in column three where we want it.  Of course, we could do define a specific location on the screen to place it if we included “top: 100px; left: 300px” or any other coordinates of our choosing but this way I don’t have to worry about defining a specific space.  The image will always go into the 0,0 coordinates of the myid <div> element.

January 21, 2014   Comments Off on Simple “Disjointed” Rollover Effect