Mouseover ?

[E Schultz]

Using FP2002
Website is www.naturalworldandfarawayplaces.com

Use larger than thumbnail, smaller than full-size more than one
to a page images and text links to the pages, rather than thumbnail
links that link to their full-size counterparts.

How do I set up an image so that text information about it
(file, subject, location, etc) becomes visible during a mouseover,
but remains invisible when no mouse is covering it ?........Izzy

 

[Trevor L.]

Using FP2002
Website is www.naturalworldandfarawayplaces.com

Use larger than thumbnail, smaller than full-size more than one
to a page images and text links to the pages, rather than thumbnail
links that link to their full-size counterparts.

How do I set up an image so that text information about it
(file, subject, location, etc) becomes visible during a mouseover,
but remains invisible when no mouse is covering it ?........Izzy

 

[Trevor L.]

Using FP2002
How do I set up an image so that text information about it
(file, subject, location, etc) becomes visible during a mouseover,
but remains invisible when no mouse is covering it ?........Izzy

I haven't looked at the site but surely you need
<img src="......." title="text that you want to appear on mouseover">

If you need a line break, put
at the line break point
e.g.
<img src="......." title=title="text that you want
to appear on
mouseover">

 

[Jim Carlock]

Using FP2002, Website is www.naturalworldandfarawayplaces.com
Use larger than thumbnail, smaller than full-size more than
one to a page images and text links to the pages, rather
than thumbnail links that link to their full-size counterparts.

How do I set up an image so that text information about it
(file, subject, location, etc) becomes visible during a
mouseover, but remains invisible when no mouse is covering
it ?

Hi Izzy,

The best way I think involves javascript.

1) Store the list of images inside a javascript array.

var aImages[["/images/image001.jpg", "Some text about the image", "/images/image001tn.jpg"], //
["/images/image002.jpg", "Some description about Image 002", "/images/image002tn.jpg"]];

2) Provide a javascript function to change the text under the
image, change the alt attribute information, possibly the title
too...

<script type="text/javascript">//<!--
var sRP = "../img/features/500x375/"; // root path

function ShowImage(i) {
var hITC = document.getElementById("ImageToChange"); // change this image
var sDesc = ""; // variable to hold short descriptive string
var sLongDesc = ""; // variable to hold long descriptive text displayed under image
hITC.src = sRP + aImages[0]; // sRP stores root path of image
sDesc = aImages[1];
hITC.title = sDesc;
hITC.alt = sDesc;
hITC = document.getElementById("Desc");
if (aImages[3] != undefined) { sLongDesc = "<br /><br />\n" + aImages[3]; }
hITC.innerHTML = sDesc + sLongDesc;
iCI = i;
}
// --></script>

3) Set up an image, provide an id in the html encoding
for the image, then use document.getElementById

<img id="ImageToChange" src="/images/image001.jpg" border="0" alt="Hover Text" /><br />
<div id="ImageDescription">Descriptive Text To Change</div>

A working example where new descriptive text is displayed each
time an image gets clicked...

Swimming Pools Website
http://www.aquaticcreationsnc.com/lib/php/viewing0.php

Read the javascript for that page from...
http://www.aquaticcreationsnc.com/lib/js/pics.js

as well as view the source to see the javascript function
listed above as well as the javascript array employed
there.

Hope that helps.

Jim Carlock
Post replies to the newsgroup.

 

[Murray]

If you need a line break, put
at the line break point

That fails in FF, which also has a 150 character limit on the display (I
believe).

 

[E Schultz]

Thanks for the replies.
Looks like this mouseover thing isn't quite as simple and
straightforward as I thought it would be. I'm going to
have-to practice for awhile till I get it right.....Izzy

 

[Murray]

Do a google for "overlib" - it may be just what you are looking for.

 

[Trevor L.]

Do a google for "overlib" - it may be just what you are looking for.

Hi to E Schultz,

Although I replied suggesting a title tag with
for a line break, I
actually use another script (not overlib). I am not sure who created it, but
I remember it as being public property - possibly from nl.internet.com or a
similar site.

This is it
//-------------------------------
// Capture events on mousemove
if (!document.all)
document.captureEvents(Event.mousemove)
//-------------------------------
// Write toolTip <div>
document.write('<div class="toolTipBox" id="toolTip"
style="z-index:1"></div>')
//-------------------------------
// Used in toolTip() and associated functions
var tt_theObj
var tt_theElemt
//-------------------------------
function toolTip(text,obj)
{
tt_theObj = obj
tt_theElemt = document.getElementById('toolTip')

tt_theElemt.style.display = 'inline'

var tipTxt = text.split("|")
for (var i = 0; i < tipTxt.length; i++)
{
tt_theElemt.appendChild(document.createTextNode(tipTxt))
tt_theElemt.appendChild(document.createElement('br'))
}

tt_theObj.onmousemove = updatePos
window.onscroll = updatePos
}
//-------------------------------
function updatePos(m)
{
if (document.all)
{ var currX = event.clientX
var currY = event.clientY }
else
{ var currX = m.pageX
var currY = m.pageY }

if (document.body.scrollTop)
{ var iL = document.body.scrollLeft
var iV = document.body.scrollTop }
else
{ var iL = document.documentElement.scrollLeft
var iV = document.documentElement.scrollTop }

var nopix = (currX > screen.width/2 - 30)
? (currX - 10 - tt_theElemt.clientWidth)
: (currX + 10)
tt_theElemt.style.left = (document.all) ? (nopix + iL) +'px' : nopix +'px'
tt_theElemt.style.top = (document.all) ? (currY + iV) +'px' : currY +'px'

tt_theObj.onmouseout = hideTip
}
//-------------------------------
function hideTip()
{
tt_theElemt.style.display = "none"
while (tt_theElemt.lastChild)
tt_theElemt.removeChild(tt_theElemt.lastChild)
}
//-------------------------------

Put all this is a file named say scripts/tooltip.js and in your <head>, add
<script type="text/javascript" src="scripts/tooltip.js"></script>

To use, add this to any tag
onmouseover="toolTip('This is a link to my other website | which is still
under construction',this)">

Note the | in the tooltip text above. This causes a line break.