Text to appear somewhere on rollover

[edbarton]

I want some text to appear in another area on the site when you roll over an image. How would I do this?

I want it similar to when you hover over the buttons on http://www.classic63lincoln.com/ but with text appearing not images

I also want to still be able to keep rollover image capabilities as well


If you don't understand what I'm asking I will try and explain it again.

[kwvarga]

javascript.... ive seen it before

onHover="javscript:changeImage();"
or something.. never used javascript though sorry I cant helpy any further

[edbarton]

That will only do a normal rollover as far as I know though. Basically I want an onmouseover code but this then makes some text appear in another place on the page.

[kwvarga]

you gotta have it call a javscript script.. and have that image originally display with it

so like where you want the image you have
<img src="javascript:getImage()"> or something..

[Distorted]

He doesn't want an image to appear. He wants to make text appear somewhere when you mouseover something.

I'm sure that LazyJim has the answer at the top of his head.

I don't however, but I can suggest that you go to a site like javascriptsource.com or dynamicdrive.com where I'm sure that you'll find something useful.

[hatchet]

[code:1:101ac1d6c7]<script>
var content=new Array()
//change the array below to the text associated with your links Expand or contract the array, depending on how many links you have
content[0]='Any content you want here - with html tags'
content[1]='Ditto'


function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
appear()
setTimeout("window.onresize=regenerate",450)
}
}

function changetext(whichcontent){

if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById("descriptions"):document.a ll.descriptions
cross_el.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>'
}
else if (document.layers){
document.d1.document.d2.document.write('<font face="Verdana"><small>'+whichcontent+'</small></font>')
document.d1.document.d2.document.close()
}

}

function appear(){
document.d1.visibility='show'
}

window.onload=regenerate2


//-->
</script>[/code:1:101ac1d6c7]

Then call it with this..
[code:1:101ac1d6c7]onmouseover="changetext(content[0]); return true;"[/code:1:101ac1d6c7]
in your link code.

[edbarton]

OK I tried this and got the error 'cross_el' is a null object. Also would this make it so that when I hover over an image I get text somewhere else? It looks from my basic javascript knowledge that this would just make text appear on rollover.

[LazyJim]

It's not too much of a problem, but the onmouseover event needs to do two things, one solution is to make it call a single function that calls two others:
[code:1:ae3dad24d0]
<script>
function doHoverText(oImg) {
// text changing code here
}

function doHoverImage(oImg) {
// image mouseover code here
}

function doMouseOver(oImg) {
doHoverText(oImg);
doHoverImage(oImg);
}
</script>
<img src="image.gif" onmouseover="doMouseOver(this)" onmouseout="doMouseOut(this)">[/code:1:ae3dad24d0]

Of course I havn't defiend the functions for onmosueout in that script but you get the idea.
I'll bet you need help with the code missing inside the functions now?

[edbarton]

yeah, I think I do

[LazyJim]

lol
ok which one first?

[edbarton]

the one for the text appearing somewhere else

[LazyJim]

Depends on if you want to store the text in JavaScript, in a hidden HTML layer, or a hidden <input> value?

Plus I gotta go, back later sorry!
(many scripts out there already).

[edbarton]

I think I'll store it in the Javascript unless activating a hidden layer is easier.

[LazyJim]

well hide/show layer is easier - but not so good when people don't have CSS enabled browsers.

In JavaScript it gets annoying if it has HTML (including <br>) or quotes (" or ') in it, and also the longer the text is the more effort it is for coding

So we can do it in JavaScript if you want.

[edbarton]

Originally Posted by LazyJim

well hide/show layer is easier - but not so good when people don't have CSS enabled browsers.

In JavaScript it gets annoying if it has HTML (including <br>) or quotes (" or ') in it, and also the longer the text is the more effort it is for coding

So we can do it in JavaScript if you want.

I think I'll go with the hide/show layer thing. It is quite a bit of text that I want to display and without css the site will probably look terrible anyway.

[LazyJim]

Now find the element (tag) that contains the whole changing part, and duplicate it in position how ever many tiems you need, (and change the text on each copy to whatever it should be).

Give each copy an id: id="changing_layer_1", id="changing_layer_2", id="changing_layer_3"...
Then give them all style="display: none; speak: none;"
... You don't have to use numbers, give them any ID you want just as long as u remember what's what!

[edbarton]

OK done that. Does this have to be done to a div tag or can it be done to a td tag as well.

[LazyJim]

no do it to a <div>, it's the safest option, and anything with tables is unsafe due to the way browsers handle them.

[LazyJim]

Ok I've changed my mind on a small thing!
Take out the style="display: none; speak: none;" and instead put in class="hidden_layer";

Then set up a style sheet that hides/shows layer that have the right class...
[code:1:641c766e0e]<style>
div.hidden_layer {
display: none;
speak: none;
}
div.visible_layer {
display: block;
speak: normal; /* EDIT: I changed this line after I posted the script */
}
/* You could add more things to hide the layers in old or wierd browsers! Like height: 0px; and visibility: hidden; */
</style>[/code:1:641c766e0e]

And this is the text changing function:
[code:1:641c766e0e]function doHoverText(sID) {
// hide some layers and show the one we want...
// sID is the ID of the layer we want to show.
// If no ID given, bail out:
if (!sID) return;
// Get a reference to the actuall layer:
var oLayer = document.getElementById(sID);
// But bail out if the layer was not found:
if (!oLayer || oLayer=='undefined') return;
// Hide ALL of the layers:
document.getElementById('changing_layer_1').class = "hidden_layer";
document.getElementById('changing_layer_2').class = "hidden_layer";
document.getElementById('changing_layer_3').class = "hidden_layer";
// ...etc. (Note we did not check if the exist, so make sure you don't do a typo, and that the layers ARE there!)
// Then show the layer we want:
oLayer.class = "visible_layer";
}
[/code:1:641c766e0e]

All untested