PDA

View Full Version : Help With Setting up script please



Babygirl31
04-30-2007, 10:10 PM
1) Script Title: Image w/ description tooltip

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm

3) Describe problem: I'm not sure how to set it up because when i mouseover my links i get either Page cannot be displayed or someone elses images pop up. My website is hosted by bravenet and the images I want to use are located in my photobucket album. I need a complete walk through as im a newbie when it comes to scripts. heres the page that the script code is on http://babygirlzcreationz.com/Scrptests.html Thanks for any/all help;)

thetestingsite
05-01-2007, 02:07 AM
This is how your page source should be:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

/////////////////////// CUSTOMIZE HERE ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip

messages[0] = new Array('/Finished&#37;20Tags/Kisses%20N%20Kuffs%201.jpg','Kisses N Kuffs',"#FFFFFF");
messages[1] = new Array('/Finished%20Tags/Electrified%20Seduction%201.gif' 'Electrified Seduction',"#FFFFFF");
messages[2] = new Array('/Finished%20Tags/BabygirlThis1.jpg','Babygirl This!', "#FFFFFF");
//////////////////// END OF CUSTOMIZATION AREA ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];
}
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
// initTip - initialization for tooltip.
// Global variables for tooltip.
// Set styles
// Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
tipcss.width = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
}
if (tooltip&&tipFollowMouse) {
document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
// Assembles content for tooltip and writes
// it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
// If tipFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and tooltip width to position
// tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title> Babygirlz Creationz </title>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>


<div id="pageWrapper">

<div id="pageHeader">
<h1><P align=center><FONT size=3><STRONG>Babygirlz Creationz...Creativity is endless.</P> <P align=center><STRONG><FONT size=3>Paintshop Pro Tutorials By Yolanda</FONT></STRONG></P></STRONG></FONT> <P align=center><STRONG><FONT size=3></FONT></STRONG>&nbsp;</P></h1>
</div>

<div id="subPageWrapper">

<div id="siteNavigation">
<h1>Navigation</h1>
<ul>
<li><a href="index.html" >Welcome</a></li>
<li><a href="Terms.html" >Terms Of Use</a></li>
<li><a href="Tutorials.html" >The Tutorials</a></li>

<li><a href="AboutMe.html" >About Me</a></li>
<li><a href="WhatsNew.html" >What's New?</a></li>
<li><a href="Links.html" >Links</a></li>
<li><a href="Scrptests.html" class="active">Script Tests</a></li>
</ul>
<div id="listBreaker"> </div>

</div>



<div id="extraContent">
<div class="contentContainer">
</div>
</div>




<div id="userLinks">

<div class="linkSection">
<h1>Things To Do</h1>

<ul>
<li><a href="http://pub41.bravenet.com/guestbook/3488957990">Sign my Guestbook</a></li>
<li><a href="http://Babygirl30.bravejournal.com">View my Journal</a></li>
</ul>
</div>
</div>



<div id="extraContent2">
<div class="contentContainer">

</div>
</div>



<div id="mainContent">
<div class="contentContainer">
<BR style="DISPLAY: none">

<A onmouseover="doTooltip(event,0)" onmouseout="hideTip(event,0)" href="http://pub41.bravenet.com/hosting/cms/0">Preview</A><BR>

<A onmouseover="doTooltip(event,1)" onmouseout="hideTip(event,1)" href="http://pub41.bravenet.com/hosting/cms/2">Preview</A><BR>

<A onmouseover="doTooltip(event,2)" onmouseout="hideTip(event,2)" href="http://pub41.bravenet.com/hosting/cms/2">Preview</A><BR>
</div>
</div>

<div id="subPageBreaker"></div>
</div>

<div id="pageFooter">
<h6><P align=center>All Content provided by Yolanda/Babygirlz Creationz&nbsp;2007-2008</P> <P align=center>Artwork &#169;Keith Garvey www.garvgraphx.com</P></h6>
</div>
</div>
</body>
</html>


Now for a break-down. The part in red (as said in the instructions on the demo page) goes in between the <head> tags. Then, notice the quotes (in blue) in the links around the function to do onmouseover/mouseout. There's not much more then that. If you need any more help, let us know.
Hope this helps.

Babygirl31
05-01-2007, 02:19 AM
thanks just one more question. do i add the image url where the image is supposed to go?

thetestingsite
05-01-2007, 02:21 AM
How do you mean, do you mean where the link redirects to, or in the image popup?

Babygirl31
05-01-2007, 06:12 PM
i added the image url like this: messages[0] = new Array('/Finished&#37;20Tags/Kisses%20N%20Kuffs%201.jpg' is that the correct way? Also, for some reason when I mouseover the link, the image doesn't automatically pop up. I have to click the link to see it. Am I still doing something wrong or is it that my webhost (bravenet) doesn't support Java Script?

mburt
05-01-2007, 06:38 PM
Try removing the new Array();

messages[0] = '/Finished&#37;20Tags/Kisses%20N%20Kuffs%201.jpg'

Babygirl31
05-01-2007, 06:42 PM
will do. thanks :)

jscheuer1
05-01-2007, 08:17 PM
thetestingsite,

The meta tags and title should come before the style and then be followed by the script.


Try removing the new Array();

messages[0] = '/Finished%20Tags/Kisses%20N%20Kuffs%201.jpg'

That's not how this script is supposed to be used.


Babygirl31,

There may be other problems but, on your page linked to in your first post in this thread, you have somehow managed to strip out all of the line breaks in the script so that it has become one huge long uninterrupted line. The line breaks in the code are there for a reason. Most of them cannot be skipped without rewriting the code.

Babygirl31
05-01-2007, 08:23 PM
Try removing the new Array();

messages[0] = '/Finished%20Tags/Kisses%20N%20Kuffs%201.jpg'

I tried your suggestion and am still having to click to see the image:confused: I use IE7 if that matters. Thanks.:)

djr33
05-01-2007, 08:25 PM
The browser may matter, but certainly not which one YOU use..... anyone who views your site should be able to see it, so it should work on all of them... yes, including IE7, but not limited to it.

As for the question, I'm sure they'll respond soon. I'm not quite sure what's going on with the script, so not sure what to say.

Babygirl31
05-01-2007, 08:44 PM
ok this i how my notepad looks far. Keep in mind, I'm not done. I just wanted to show a visual aid so someone can pinpoint what I am doing wrong because I still have to click to see the images. Sorry for being a pain:( Thanks for everyone's help so far. :)



<html>
<head>
<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before </BODY>. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

/////////////////////// CUSTOMIZE HERE ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip

messages[0] = new Array('/Finished%20Tags/Kisses%20N%20Kuffs%201.jpg','Kisses N Kuffs',"#FFFFFF");
messages[1] = new Array('/Finished%20Tags/Electrified%20Seduction%201.gif' 'Electrified Seduction',"#FFFFFF");
messages[2] = new Array('/Finished%20Tags/BabygirlThis1.jpg','Babygirl This!', "#FFFFFF");
messages[3] = new Array('http://babygirlzcreationz.com/Finished%20Tags/Confined%20Love1.jpg','Confined Love',"#FFFFFF);
messages[4] = new Array('http://babygirlzcreationz.com/Finished%20Tags/KidLiscious1.jpg','Kid-Liscious',"#FFFFFF);
messages[5] = new Array(http://babygirlzcreationz.com/Finished%20Tags/LOVESA*****1.gif','Love's A *****!',"#FFFFFF);
//////////////////// END OF CUSTOMIZATION AREA ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];
}
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"></td></tr><tr><td valign="top">';
var endStr = '</td></tr></table>';

////////////////////////////////////////////////////////////
// initTip - initialization for tooltip.
// Global variables for tooltip.
// Set styles
// Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
tipcss.width = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
}
if (tooltip&&tipFollowMouse) {
document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
// Assembles content for tooltip and writes
// it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
// If tipFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and tooltip width to position
// tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

</script>
<a href="http://babygirlzcreationz.com/Finished%20Tags/Kisses%20N%20Kuffs%201.jpg" onmouseover="doTooltip(event,0)" onmouseout="http://babygirlzcreationz.com/Finished%20Tags/Kisses%20N%20Kuffs%201.jpg">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/Electrified%20Seduction%201.gif" onmouseover="doTooltip(event,1)" onmouseout="http://babygirlzcreationz.com/Finished%20Tags/Electrified%20Seduction%201.gif">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/BabygirlThis1.jpg" onmouseover="doTooltip(event,2)" onmouseout="http://babygirlzcreationz.com/Finished%20Tags/BabygirlThis1.jpg">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/Confined%20Love1.jpg" onmouseover="doTooltip(event,3)" onmouseout="http://babygirlzcreationz.com/Finished%20Tags/Confined%20Love1.jpg">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/KidLiscious1.jpg" onmouseover="doTooltip(event,4)" onmouseout="http://babygirlzcreationz.com/Finished%20Tags/KidLiscious1.jpg">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/LOVESA*****1.gif" onmouseover="doTooltip(event,5)" onmouseout="http://babygirlzcreationz.com/Finished%20Tags/LOVESA*****1.gif">Preview</a><br>

jscheuer1
05-01-2007, 09:14 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Yolanda's Creations</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tipDiv {
width:auto!important;
}
</style>
<script type="text/javascript">

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

/* IMPORTANT: Put script after tooltip div or
put tooltip div just before closing body tag. */

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

var origWidth, origHeight;

// avoid error of passing event object in older browsers
if (nodyn) { event = "nope" }

/////////////////////// CUSTOMIZE HERE ////////////////////
// settings for tooltip
// Do you want tip to move when mouse moves over link?
var tipFollowMouse= true;
// Be sure to set tipWidth wide enough for widest image
var tipWidth= 160;
var offX= 20; // how far from mouse to show tip
var offY= 12;
var tipFontFamily= "Verdana, arial, helvetica, sans-serif";
var tipFontSize= "8pt";
// set default text color and background color for tooltip here
// individual tooltips can have their own (set in messages arrays)
// but don't have to
var tipFontColor= "#000000";
var tipBgColor= "#DDECFF";
var tipBorderColor= "#000080";
var tipBorderWidth= 3;
var tipBorderStyle= "ridge";
var tipPadding= 4;

// tooltip content goes here (image, description, optional bgColor, optional textcolor)
var messages = new Array();
// multi-dimensional arrays containing:
// image and text for tooltip
// optional: bgColor and color to be sent to tooltip

messages[0] = new Array('http://babygirlzcreationz.com/Finished%20Tags/Kisses%20N%20Kuffs%201.jpg','Kisses N Kuffs',"#FFFFFF");
messages[1] = new Array('http://babygirlzcreationz.com/Finished%20Tags/Electrified%20Seduction%201.gif', 'Electrified Seduction',"#FFFFFF");
messages[2] = new Array('http://babygirlzcreationz.com/Finished%20Tags/BabygirlThis1.jpg','Babygirl This!', "#FFFFFF");
messages[3] = new Array('http://babygirlzcreationz.com/Finished%20Tags/Confined%20Love1.jpg','Confined Love',"#FFFFFF");
messages[4] = new Array('http://babygirlzcreationz.com/Finished%20Tags/KidLiscious1.jpg','Kid-Liscious',"#FFFFFF");
messages[5] = new Array('http://babygirlzcreationz.com/Finished%20Tags/LOVESA*****1.gif','Love\'s A *****!',"#FFFFFF");
//////////////////// END OF CUSTOMIZATION AREA ///////////////////

// preload images that are to appear in tooltip
// from arrays above
if (document.images) {
var theImgs = new Array();
for (var i=0; i<messages.length; i++) {
theImgs[i] = new Image();
theImgs[i].src = messages[i][0];
}
}

// to layout image and text, 2-row table, image centered in top cell
// these go in var tip in doTooltip function
// startStr goes before image, midStr goes between image and text
var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';
var midStr = '" border="0"><\/td><\/tr><tr><td valign="top">';
var endStr = '<\/td><\/tr><\/table>';

////////////////////////////////////////////////////////////
// initTip - initialization for tooltip.
// Global variables for tooltip.
// Set styles
// Set up mousemove capture if tipFollowMouse set true.
////////////////////////////////////////////////////////////
var tooltip, tipcss;
function initTip() {
if (nodyn) return;
tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
tipcss = tooltip.style;
if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites
tipcss.width = tipWidth+"px";
tipcss.fontFamily = tipFontFamily;
tipcss.fontSize = tipFontSize;
tipcss.color = tipFontColor;
tipcss.backgroundColor = tipBgColor;
tipcss.borderColor = tipBorderColor;
tipcss.borderWidth = tipBorderWidth+"px";
tipcss.padding = tipPadding+"px";
tipcss.borderStyle = tipBorderStyle;
}
if (tooltip&&tipFollowMouse) {
document.onmousemove = trackMouse;
}
}

window.onload = initTip;

/////////////////////////////////////////////////
// doTooltip function
// Assembles content for tooltip and writes
// it to tipDiv
/////////////////////////////////////////////////
var t1,t2; // for setTimeouts
var tipOn = false; // check if over tooltip link
function doTooltip(evt,num) {
if (!tooltip) return;
if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);
tipOn = true;
// set colors if included in messages array
if (messages[num][2]) var curBgColor = messages[num][2];
else curBgColor = tipBgColor;
if (messages[num][3]) var curFontColor = messages[num][3];
else curFontColor = tipFontColor;
if (ie4||ie5||ns5) {
var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '<\/span>' + endStr;
tipcss.backgroundColor = curBgColor;
tooltip.innerHTML = tip;
}
if (!tipFollowMouse) positionTip(evt);
else t1=setTimeout("tipcss.visibility='visible'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);
}

/////////////////////////////////////////////////////////////
// positionTip function
// If tipFollowMouse set false, so trackMouse function
// not being used, get position of mouseover event.
// Calculations use mouseover event position,
// offset amounts and tooltip width to position
// tooltip within window.
/////////////////////////////////////////////////////////////
function positionTip(evt) {
if (!tipFollowMouse) {
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
}
// tooltip width and height
var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
// document area in view (subtract scrollbar width for ns)
var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;
// check mouse position against tip and window dimensions
// and position the tooltip
if ((mouseX+offX+tpWd)>winWd)
tipcss.left = mouseX-(tpWd+offX)+"px";
else tipcss.left = mouseX+offX+"px";
if ((mouseY+offY+tpHt)>winHt)
tipcss.top = winHt-(tpHt+offY)+"px";
else tipcss.top = mouseY+offY+"px";
if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);
}

function hideTip() {
if (!tooltip) return;
t2=setTimeout("tipcss.visibility='hidden'",100);
tipOn = false;
}
</script>
</head>
<body>
<a href="http://babygirlzcreationz.com/Finished%20Tags/Kisses%20N%20Kuffs%201.jpg" onmouseover="doTooltip(event,0)" onmouseout="hideTip();">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/Electrified%20Seduction%201.gif" onmouseover="doTooltip(event,1)" onmouseout="hideTip();">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/BabygirlThis1.jpg" onmouseover="doTooltip(event,2)" onmouseout="hideTip();">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/Confined%20Love1.jpg" onmouseover="doTooltip(event,3)" onmouseout="hideTip();">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/KidLiscious1.jpg" onmouseover="doTooltip(event,4)" onmouseout="hideTip();">Preview</a><br>
<a href="http://babygirlzcreationz.com/Finished%20Tags/LOVESA*****1.gif" onmouseover="doTooltip(event,5)" onmouseout="hideTip();">Preview</a><br>
<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>
</body></html>

Babygirl31
05-07-2007, 06:05 PM
So where do i put the script in my page so that preview is right after the name of the tutorial?:confused: Thanks

Babygirl31
05-07-2007, 06:07 PM
heres the page i want the script in

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title> Babygirlz Creationz </title>

<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>


<div id="pageWrapper">

<div id="pageHeader">
<h1><P align=center><FONT size=3><STRONG>Babygirlz Creationz...Welcome to&nbsp;my wildside!</P> <P align=center><STRONG><FONT size=3>Paintshop Pro Tutorials By Yolanda</FONT></STRONG></P></STRONG></FONT> <P align=center><STRONG><FONT size=3></FONT></STRONG>&nbsp;</P></h1>
</div>
<div id="subPageWrapper">

<div id="siteNavigation">
<h1>Navigation</h1>
<ul>
<li><a href="index.html" >Welcome</a></li>
<li><a href="Terms.html" >Terms Of Use</a></li>
<li><a href="AboutMe.html" >About Me</a></li>
<li><a href="WhatsNew.html" >What's New?</a></li>
<li><a href="Links.html" >Links</a></li>
<li><a href="Tuts.html" class="active">Tutorials</a></li>
</ul>
<div id="listBreaker"> </div>
</div>



<div id="extraContent">
<div class="contentContainer">
</div>
</div>




<div id="userLinks">

<div class="linkSection">
<h1>Things To Do</h1>
<ul>
<li><a href="http://pub41.bravenet.com/guestbook/3488957990">Sign my Guestbook</a></li>
<li><a href="http://Babygirl30.bravejournal.com">View my Journal</a></li>
</ul>
</div>
</div>



<div id="extraContent2">
<div class="contentContainer">
</div>
</div>



<div id="mainContent">
<div class="contentContainer">
<P align=center><IMG src="http://babygirlzcreationz.com/myPictures/Tutorials.jpg"></P> <P align=center><STRONG>Kisses N Kuffs&nbsp; </STRONG></P> <P align=center><STRONG>Electrified Seduction&nbsp; </STRONG></P> <P align=center><STRONG>Babygirl This&nbsp; </STRONG></P> <P align=center><STRONG>Confined Love&nbsp; </STRONG></P> <P align=center><STRONG>Kid-Licious&nbsp; </STRONG></P> <P align=center><STRONG>Love's A *****&nbsp; </STRONG></P> <P align=center><STRONG>My Give A Damn Is Busted&nbsp; </STRONG></P> <P align=center><STRONG>Burn Rubber&nbsp; </STRONG></P> <P align=center><STRONG>Blue Jean Babes&nbsp; </STRONG></P> <P align=center><STRONG>Love Lesson 101&nbsp; </STRONG></P> </div>
</div>


<div id="subPageBreaker"></div>
</div>

<div id="pageFooter">
<h6><P align=center>All Content provided by Yolanda/Babygirlz Creationz&nbsp;2007-2008</P> <P align=center>Artwork ┬ęKeith Garvey www.garvgraphx.com</P></h6>
</div>

</div>



</body>
</html>

Thanks:o