Tool tip positioning of the Tip!!

**tdp** · 03-08-2012, 04:24 AM

1) Script Title: Textual tooltip Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/linkinfo.htm

3) Describe problem: I took the above mentioned script and combined it with a old coded image rollover script. The two work perfectly together, however I would like to be able to position the "hover over" text over the 2nd image. Here is the test link: http://www.halfwayenterprises.com/testy2.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers
Image1= new Image(165,237)
Image1.src = "asset.jpg"
Image2 = new Image(165,237)
Image2.src = "asset2.jpg"
function SwapOut1() {
document.imageflip.src = Image2.src; return true;
}
function SwapBack1() {
document.imageflip.src = Image1.src; return true;
}

Image3= new Image(165,237)
Image3.src = "budget.jpg"
Image4 = new Image(165,237)
Image4.src = "budget2.jpg"
function SwapOut2() {
document.imageflip2.src = Image4.src; return true;
}
function SwapBack2() {
document.imageflip2.src = Image3.src; return true;
}

Image5= new Image(165,237)
Image5.src = "disposal.jpg"
Image6 = new Image(165,237)
Image6.src = "disposal2.jpg"
function SwapOut3() {
document.imageflip3.src = Image6.src; return true;
}
function SwapBack3() {
document.imageflip3.src = Image5.src; return true;
}

Image7= new Image(165,237)
Image7.src = "customer.jpg"
Image8 = new Image(165,237)
Image8.src = "customer2.jpg"
function SwapOut4() {
document.imageflip4.src = Image8.src; return true;
}
function SwapBack4() {
document.imageflip4.src = Image7.src; return true;
}


Image9= new Image(165,237)
Image9.src = "contracting.jpg"
Image10 = new Image(165,237)
Image10.src = "contracting2.jpg"
function SwapOut5() {
document.imageflip5.src = Image10.src; return true;
}
function SwapBack5() {
document.imageflip5.src = Image9.src; return true;
}

<!--START OF NEXT 5 -->



Image11= new Image(165,237)
Image11.src = "real.jpg"
Image12 = new Image(165,237)
Image12.src = "real2.jpg"
function SwapOut6() {
document.imageflip6.src = Image12.src; return true;
}
function SwapBack6() {
document.imageflip6.src = Image11.src; return true;
}

Image13= new Image(165,237)
Image13.src = "rpm.jpg"
Image14 = new Image(165,237)
Image14.src = "rpm2.jpg"
function SwapOut7() {
document.imageflip7.src = Image14.src; return true;
}
function SwapBack7() {
document.imageflip7.src = Image13.src; return true;
}

Image15= new Image(165,237)
Image15.src = "design.jpg"
Image16 = new Image(165,237)
Image16.src = "design2.jpg"
function SwapOut8() {
document.imageflip8.src = Image16.src; return true;
}
function SwapBack8() {
document.imageflip8.src = Image15.src; return true;
}


Image17= new Image(165,237)
Image17.src = "org.jpg"
Image18 = new Image(165,237)
Image18.src = "org2.jpg"
function SwapOut9() {
document.imageflip9.src = Image18.src; return true;
}
function SwapBack9() {
document.imageflip9.src = Image17.src; return true;
}

Image19= new Image(165,237)
Image19.src = "client.jpg"
Image20 = new Image(165,237)
Image20.src = "client2.jpg"
function SwapOut10() {
document.imageflip10.src = Image20.src; return true;
}
function SwapBack10() {
document.imageflip10.src = Image19.src; return true;
}







// - stop hiding -->
</SCRIPT>

<script>
<!--

/*
Textual Tooltip Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/


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]='<br><a href="http://www.yahoo.com">Asset Management</a><br><a href="http://www.google.com">Google</a><br><a href="http://www.masonicprints.com.com">Masonic Prints</a><br><a href="http://www.yahoo.com">Yahoo</a><br><a href="http://www.facebook.com.com">Face Book</a><br><br><a href="http://www.cnn.com">CNN</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br><br><a href="http://www.yahoo.com">Asset Management</a><br>'

content[1]='<br><a href="http://www.yahoo.com">yep</a><br><a href="http://www.google.com">Google</a><br><a href="http://www.masonicprints.com.com">TDP</a><br><a href="http://www.yahoo.com">Yahoo</a><br>'
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.all.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>
<style type="text/css">
a:hover {
color:#9999CC;
position:300px;
}
</style>
</head>

<body>
<div id="scriptmenu" style="line-height:20px"></div>
<table border="1">
<tr><td>
<a href="index.html" onMouseOver="SwapOut1(); changetext(content[0])" onMouseOut="SwapBack1()"> 
<img name="imageflip" src="asset.jpg" width=165 height=237 border=0></a></td>

 <td><a href="index.html" onMouseOver="SwapOut2(); changetext(content[1])" onMouseOut="SwapBack2()"> 
  <img name="imageflip2" src="budget.jpg"  width="165" height="237" border=0/></a></td>
  </tr></table>


<ilayer id="d1" width="20" height="20" visibility="hide">
<layer id="d2" width="20" height="20">
<div id="descriptions">

</div>
</layer>
</ilayer>
</body>
</html>

**jscheuer1** · 03-08-2012, 04:49 AM

Add a (highlighted in the below) positioned wrapper to it:

Code:

content[1]='<div style="position:relative; left: 175px;"><br><a href="http://w . . . oo</a><br></div>'

**tdp** · 03-08-2012, 01:09 PM

Thanks so much! How do I revert to the "image flip" upon hovering over the image links? As of now it still reverts to the original image when hovering over the text.
http://www.halfwayenterprises.com/testy2.html

Code:

content[0]='<div style="position:relative; left: 10px; top:-250px; "><br><a href="/portal/page?_pageid=739,13997141&amp;_dad=portal&amp;_schema=PORTAL">Asset Management</a><br><a href="pricing.htm">Pricing</a><br><a href="valuation.htm">Valuation</a>'

**jscheuer1** · 03-08-2012, 04:28 PM

Well now it seems these two scripts aren't working together as perfectly as you first thought. You can add the (red):

Code:

content[0]='<div style="position:relative; left: 10px; top:-250px; width: 165px;" onMouseOver="SwapOut1();" onMouseOut="SwapBack1()"><br><a hr . . 
content[1]='<div style="position:relative; left: 180px; top:-250px; width: 165px;" onMouseOver="SwapOut2();" onMouseOut="SwapBack2()"><br><a h . . .

But things are getting messier and messier. And a new situation develops. In IE the links on the images will be clickable as long as the mouse isn't over the links in the descriptions, while in all other browsers the links on the images will only be clickable when the mouse is over that part of the image that's not covered by the respective description div content div wrappers.

You can fairly easily get IE to behave like the others by giving the descriptions division's child div's a phony background:

Code:

window.onload=regenerate2


//-->
</script>
<style type="text/css">
a:hover {
color:#9999CC;
}
</style>
<!--[if IE]>
<style type="text/css">
#descriptions div {
	background-image: url(not_a.gif);
}
</style>
<![endif]-->
</head>

There are layout issues below the images (below the <div id="descriptions"> div really). If you add content there, it will jump around:

Code:

 <td><a href="index.html" onMouseOver="SwapOut2(); changetext(content[1])" onMouseOut="SwapBack2()"> 
  <img name="imageflip2" src="budget.jpg"  width="165" height="237" border=0/></a></td>
  </tr></table>




<ilayer id="d1" width="20" height="20" visibility="hide">
<layer id="d2" width="20" height="20">
<div id="descriptions">

fgfdgfd


</div>
Howdy
</layer>

Oh, and the opening and closing layer and ilayer tags are useless in today's browsers. They should be removed.

You can fix both issues by wrapping again and getting rid of those tags, this time like so:

Code:

<body>
<div id="scriptmenu" style="line-height:20px"></div>
<div style="height: 270px; overflow: hidden;">
<table border="1">
<tr><td>
<a href="index.html" onMouseOver="SwapOut1(); changetext(content[0])" onMouseOut="SwapBack1()"> 
<img name="imageflip" src="asset.jpg" width=165 height=237 border=0></a></td>

 <td><a href="index.html" onMouseOver="SwapOut2(); changetext(content[1])" onMouseOut="SwapBack2()"> 
  <img name="imageflip2" src="budget.jpg"  width="165" height="237" border=0/></a></td>
  </tr></table>
<div id="descriptions">

fgfdgfd


</div>
</div>
Howdy
</body>
</html>

If you don't want to be able to see fgfdgfd at all, you can remove it and/or make the wrapper shorter - say 250px for the height. Or if you want more content in there initially, something more/other than fgfdgfd, you might need to make it higher so the content can show through.

Full code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<SCRIPT type="text/javascript">

Image1= new Image(165,237)
Image1.src = "asset.jpg"
Image2 = new Image(165,237)
Image2.src = "asset2.jpg"
function SwapOut1() {
document.imageflip.src = Image2.src; return true;
}
function SwapBack1() {
document.imageflip.src = Image1.src; return true;
}

Image3= new Image(165,237)
Image3.src = "budget.jpg"
Image4 = new Image(165,237)
Image4.src = "budget2.jpg"
function SwapOut2() {
document.imageflip2.src = Image4.src; return true;
}
function SwapBack2() {
document.imageflip2.src = Image3.src; return true;
}

Image5= new Image(165,237)
Image5.src = "disposal.jpg"
Image6 = new Image(165,237)
Image6.src = "disposal2.jpg"
function SwapOut3() {
document.imageflip3.src = Image6.src; return true;
}
function SwapBack3() {
document.imageflip3.src = Image5.src; return true;
}

Image7= new Image(165,237)
Image7.src = "customer.jpg"
Image8 = new Image(165,237)
Image8.src = "customer2.jpg"
function SwapOut4() {
document.imageflip4.src = Image8.src; return true;
}
function SwapBack4() {
document.imageflip4.src = Image7.src; return true;
}

Image9= new Image(165,237)
Image9.src = "contracting.jpg"
Image10 = new Image(165,237)
Image10.src = "contracting2.jpg"
function SwapOut5() {
document.imageflip5.src = Image10.src; return true;
}
function SwapBack5() {
document.imageflip5.src = Image9.src; return true;
}

<!--START OF NEXT 5 -->

Image11= new Image(165,237)
Image11.src = "real.jpg"
Image12 = new Image(165,237)
Image12.src = "real2.jpg"
function SwapOut6() {
document.imageflip6.src = Image12.src; return true;
}
function SwapBack6() {
document.imageflip6.src = Image11.src; return true;
}

Image13= new Image(165,237)
Image13.src = "rpm.jpg"
Image14 = new Image(165,237)
Image14.src = "rpm2.jpg"
function SwapOut7() {
document.imageflip7.src = Image14.src; return true;
}
function SwapBack7() {
document.imageflip7.src = Image13.src; return true;
}


Image15= new Image(165,237)
Image15.src = "design.jpg"
Image16 = new Image(165,237)
Image16.src = "design2.jpg"
function SwapOut8() {
document.imageflip8.src = Image16.src; return true;
}
function SwapBack8() {
document.imageflip8.src = Image15.src; return true;
}

Image17= new Image(165,237)
Image17.src = "org.jpg"
Image18 = new Image(165,237)
Image18.src = "org2.jpg"
function SwapOut9() {
document.imageflip9.src = Image18.src; return true;
}
function SwapBack9() {
document.imageflip9.src = Image17.src; return true;
}

Image19= new Image(165,237)
Image19.src = "client.jpg"
Image20 = new Image(165,237)
Image20.src = "client2.jpg"
function SwapOut10() {
document.imageflip10.src = Image20.src; return true;
}
function SwapBack10() {
document.imageflip10.src = Image19.src; return true;
}
</SCRIPT>

<script>

/*
Textual Tooltip Script- 
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/


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]='<div style="position:relative; left: 10px; top:-250px; width: 165px;" onMouseOver="SwapOut1();" onMouseOut="SwapBack1()"><br><a href="/portal/page?_pageid=739,13997141&amp;_dad=portal&amp;_schema=PORTAL">Asset Management</a><br><a href="pricing.htm">Pricing</a><br><a href="valuation.htm">Valuation</a>'
content[1]='<div style="position:relative; left: 180px; top:-250px; width: 165px;" onMouseOver="SwapOut2();" onMouseOut="SwapBack2()"><br><a href="http://www.yahoo.com">yep</a><br><a href="http://www.google.com">Google</a><br><a href="http://www.masonicprints.com.com">TDP</a><br><a href="http://www.yahoo.com">Yahoo</a><br>'
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.all.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>
<style type="text/css">
a:hover {
color:#9999CC;
}
</style>
<!--[if IE]>
<style type="text/css">
#descriptions div {
	background-image: url(not_a.gif);
}
</style>
<![endif]-->
</head>

<body>
<div id="scriptmenu" style="line-height:20px"></div>
<div style="height: 270px; overflow: hidden;">
<table border="1">
<tr><td>
<a href="index.html" onMouseOver="SwapOut1(); changetext(content[0])" onMouseOut="SwapBack1()"> 
<img name="imageflip" src="asset.jpg" width=165 height=237 border=0></a></td>

 <td><a href="index.html" onMouseOver="SwapOut2(); changetext(content[1])" onMouseOut="SwapBack2()"> 
  <img name="imageflip2" src="budget.jpg"  width="165" height="237" border=0/></a></td>
  </tr></table>
<div id="descriptions">

fgfdgfd


</div>
</div>
Howdy
</body>
</html>

The code is a bit unwieldy, especially if you plan to add more images and descriptions, and will not validate to the DOCTYPE (that can probably be fixed), but at least now it's serviceable.

One other thing, it might be good to remove the tip links when the mouse leaves the images. But I'm going to leave that for possibly later. You might not want it anyway.

**tdp** · 03-09-2012, 02:42 PM

"One other thing, it might be good to remove the tip links when the mouse leaves the images."

Actually..I do need that part..if you don't mind...lol

**jscheuer1** · 03-09-2012, 03:25 PM

Add the highlighted as shown:

Code:

 . . . ument.d2.document.close()
}

}

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

window.onload=regenerate2
document.onmouseout = function(e){
	e = e || event;
	var t = e.target || e.srcElement, rt = e.relatedTarget || e.toElement, re = /\bimdesc\b/;
	if(rt && re.test(t.className) && !re.test(rt.className)){
		while(rt = rt.parentNode){
			if(re.test(rt.className)){
				return;
			}
		}
		document.getElementById('descriptions').innerHTML = '';
	} else if (!rt && re.test(t.className)) {document.getElementById('descriptions').innerHTML = '';}
};
</script>

Give the imdesc class to the two images and the content div wrappers:

Code:

<table border="1">
<tr><td>
<a href="index.html" onMouseOver="SwapOut1(); changetext(content[0])" onMouseOut="SwapBack1()"> 
<img class="imdesc" name="imageflip" src="asset.jpg" width=165 height=237 border=0></a></td>

 <td><a href="index.html" onMouseOver="SwapOut2(); changetext(content[1])" onMouseOut="SwapBack2()"> 
  <img class="imdesc" name="imageflip2" src="budget.jpg"  width="165" height="237" border=0/></a></td>
  </tr></table>

and:

Code:

content[0]='<div class="imdesc" style="position:relativ . . .
content[1]='<div class="imdesc" style="position:relativ . . .

**tdp** · 03-16-2012, 07:49 PM

Thanks..works great...however since am putting this code in Oracle 9i HTML Portal ..having VAST problems...lol

**tdp** · 03-21-2012, 01:51 PM

Question when hovering over links..the background image which comes from the swap doesn't display..anyway to fix this?

Thread: Tool tip positioning of the Tip!!

Thread Tools

Search Thread

Tool tip positioning of the Tip!!

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions