Mouseover text for image

Mouseover text for an image

This is an example: EXAMPLE

Description

You can have a line of text that describes a Picture or scene then when someone goes over it with their mouse
the picture will pop up on the screen.

Step by Step

Paste this into your pages header:

<script type="text/javascript"><!-- 
function setFirstChildImgDisplay(el,vis) {
  if(!el || !el.getElementsByTagName) return;
  el.getElementsByTagName('img')[0].style.display=vis;
}
// -->
</script>

Double click on an open area of your page / select the "Page HTML" tab / click on the Inside Page Header radio button / in that text box paste the JavaScript / press the OK button

Drag your HTML object onto the page,
double click on it and paste this:

<div onmouseover="setFirstChildImgDisplay(this,'block')" 
onmouseout="setFirstChildImgDisplay(this,'none')">Wahoooooo some Text yipeeeee
<img src="$thisfolderurl$yourPICTURESname.jpg" alt="short description of image"
style="display:none;margin-top:1em;"></div>

attach the image you want to use to the page with an HTML object
put the name of your image in here src="$thisfolderurl$yourPICTURESname.jpg"

Working with an HTML object

Description of Added Coding

I added a little bit of styling to the code for the font colors & size for the text.
Then I added some code so that the image would be centered & have a border around it.
Paste this instead if you want those options.

Alternative

You can also use web studio to style the text instead of coding it yourself see this page:
MouseOver WS styled Text to Image

Drag your HTML object onto the page,
double click on it and paste this (instead of the other one):

<div onmouseover="setFirstChildImgDisplay(this,'block')" 
onmouseout="setFirstChildImgDisplay(this,'none')"
style="FONT-SIZE: 15px; MARGIN: 3px;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: transparent;
TEXT-ALIGN: center;" >
<P><FONT color=#94973a>This is where you put your TEXT</Font></P>
<img src="MOtext2picture/CARD.JPG" alt="DESCRIPTION"
style="display:none;margin-top:1em;
position:relative;
top:-50px;
margin-left:auto; margin-right:auto;
border: 2px solid #94973a"></div>

Using the above code

FONT-SIZE: 15px; You can change the size of the font here
FONT color=#94973a This is the color of the font, you can put in names too like black or gold color=gold Color chart
border: 2px solid #94973a" This is where you can change the border style, or just delete that line for no border.
See the Borders page for more.

Video Tutorial

Mouseover text video.wmv