Mouseover ?

  • Thread starter Thread starter E Schultz
  • Start date Start date
E

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
 
E said:
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
Click to expand...
 
E said:
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
Click to expand...

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">
 
E Schultz said:
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 ?
Click to expand...

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.
 
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).
 
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 said:
Do a google for "overlib" - it may be just what you are looking for.
Click to expand...

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.
 
Back
Top