PDA

Click to See Complete Forum and Search --> : Where does the picture go?

babs239
12-30-2003, 08:34 AM
When using this code, where do should I put the information about the picture that you go over to show the pop up message?

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->


<!-- Begin
function showtip2(current,e,text){
if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}
else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}
// End -->
</script>

</HEAD>

<!-- STEP TWO: Copy this code into the BODY of your HTML document -->

<BODY>

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:gold;z-index:10"></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'Be sure to check out our new pictures!!!!');" onMouseout="hidetip2();" STYLE="cursor: hand">
<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7">
<IMG SRC="/img/animated-tooltip/1.gif" WIDTH="100" HEIGHT="39" BORDER="0"><p>
</TABLE>
<p></div>

<p><center>
<!-- Script Size: 2.17 KB -->
Pittimann
12-30-2003, 08:50 AM
Hi!

Could you please specify, what information you mean? Is it the image's attributes or the tooltip text or what else?

Cheers - Pit
babs239
12-30-2003, 08:53 AM
I got the tool tip text to display but I cannot get a picture to show up to put the mouse over to show the tip. Right now there is just a box with an x in it. I know what graphic I would like to use but do not know where to put the location of the graphic into the code to make it show instead of the box with the x in it.
babs239
12-30-2003, 08:54 AM
I guess what I need it to insert the image attributes so that I can see the picture I want to go over to show the tool tip.
Pittimann
12-30-2003, 09:03 AM
Hi!

Just check out the following line quite at the end of your code:

<IMG SRC="/img/animated-tooltip/1.gif" WIDTH="100" HEIGHT="39" BORDER="0">

You should replace SRC="/img/animated-tooltip/1.gif" with:
SRC="pathToYourImage"

pathToYourImage is the relative or absolute path to the image you want to be displayed (example: the name of the image file is "myImage.gif" and it is in the same folder like the file containing the code - then your SRC= would have to be SRC="myImage.gif").

You should as well adjust the values for width and height to those of your image...

Cheers - Pit
furious70
12-30-2003, 09:03 AM
If I understand, I'd put it as indicated in the code below

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:gold;z-index:10"></div>
<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'Be sure to check out our new pictures!!!!');" onMouseout="hidetip2();" STYLE="cursor: hand">

<IMG SRC="imageToBeRolledOverForToolTip.jpg">

<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7">
<IMG SRC="/img/animated-tooltip/1.gif" WIDTH="100" HEIGHT="39" BORDER="0"><p>
</TABLE>
<p></div>

whoops, too slow on my part :) I wasn't sure if that table with the 1.gif in it was some kind of additional footer for the page or if it was the content. If it's the content than as Pit said
babs239
12-30-2003, 09:14 AM
Thanks, it was as simple as one too many / in my original insertion of the location of the graphic.

You saved me a long time hunting for something obscure. I appreciate it! :D