Well, it is a little more complicated than that. First of all these custom bullets can only show on links displayed in a floatie that is visible until dismissed. I've created a demo that combines the two scripts by modifying both of them slightly. What you need to know is that the class="ddbullet" declarations now belong in the floattext[x] numbered declarations. And the onmouseOver event has been added to for the second floatie. Here it is:
HTML Code:
<html>
<title>Link Floatie script- w/ Custom Bullets</title>
<head>
<script type="text/javascript">
/***********************************************
* Bullet Link script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Write out bullet image. Change "x.gif" below to desired image path:
var bulletimg='<img id="bullet" style="z-index:500;position:absolute; left: -300px" src="x.gif">'
var bulletoffX=2 //Set horizontal offset of bullet image from link's root. (ie: -2 or 5)
var bulletoffY=0 //Set vertical offset of bullet image from link's root. (ie: -2 or 5)
function caloffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function displaybullet(linkobj){
bulletobj.style.left=caloffset(linkobj, "left")-bulletobj.width-bulletoffX+"px"
bulletobj.style.top=caloffset(linkobj, "top")-bulletoffY+linkobj.offsetHeight/3+"px"
bulletobj.style.visibility="visible"
}
function modifylinks(){
bulletobj=document.all? document.all.bullet : document.getElementById("bullet")
for (i=0; i<document.links.length; i++){
if (document.links[i].className=="ddbullet"){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}
if (document.all || document.getElementById)
document.write(bulletimg)
</script>
<style type="text/css">
#dhtmlfloatie{
position: absolute;
left: 0;
left: -900px;
filter:alpha(opacity=0);
-moz-opacity:0;
border: 2px solid black;
padding: 5px;
z-index: 100;
}
</style>
<script type="text/javascript">
/***********************************************
* Link Floatie script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var floattext=new Array()
floattext[0]='- <a class="ddbullet" href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a><br>- <a class="ddbullet" href="http://www.javascriptkit.com/javaindex.shtml">JavaScript Tutorials</a><br>- <a class="ddbullet" href="http://www.javascriptkit.com/dhtmltutors/index.shtml">DHTML/ CSS Tutorials</a><br>- <a class="ddbullet" href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a><br><div align="right"><a href="javascript:hidefloatie()">Hide Box</a></div>'
floattext[1]='Some other floatie text'
var floatiewidth="250px" //default width of floatie in px
var floatieheight="60px" //default height of floatie in px. Set to "" to let floatie content dictate height.
var floatiebgcolor="lightyellow" //default bgcolor of floatie
var fadespeed=70 //speed of fade (5 or above). Smaller=faster.
var baseopacity=0
function slowhigh(which2){
imgobj=which2
browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
highlighting=setInterval("gradualfade(imgobj)",fadespeed)
}
function instantset(degree){
cleartimer()
if (browserdetect=="mozilla")
imgobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
imgobj.filters.alpha.opacity=degree
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (window.highlighting)
clearInterval(highlighting)
}
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function paramexists(what){
return(typeof what!="undefined" && what!="")
}
function showfloatie(thetext, e, optbgColor, optWidth, optHeight){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.left="-900px"
floatobj.style.display="block"
floatobj.style.backgroundColor=paramexists(optbgColor)? optbgColor : floatiebgcolor
floatobj.style.width=paramexists(optWidth)? optWidth+"px" : floatiewidth
floatobj.style.height=paramexists(optHeight)? optHeight+"px" : floatieheight!=""? floatieheight : ""
floatobj.innerHTML=thetext
var floatWidth=floatobj.offsetWidth>0? floatobj.offsetWidth : floatobj.style.width
var floatHeight=floatobj.offsetHeight>0? floatobj.offsetHeight : floatobj.style.width
var winWidth=document.all&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
var winHeight=document.all&&!window.opera? ietruebody().clientHeight : window.innerHeight
e=window.event? window.event : e
floatobj.style.left=dsocx+winWidth-floatWidth-5+"px"
if (e.clientX>winWidth-floatWidth && e.clientY+20>winHeight-floatHeight)
floatobj.style.top=dsocy+5+"px"
else
floatobj.style.top=dsocy+winHeight-floatHeight-5+"px"
slowhigh(floatobj)
}
function hidefloatie(){
var floatobj=document.getElementById("dhtmlfloatie")
floatobj.style.display="none"
}
</script>
</head>
<body>
<div id="dhtmlfloatie" ></div>
<a href="#" onMouseover="showfloatie('Web coding and development forums. Get help on JavaScript, CGI, PHP, CSS, and more.', event)" onMouseout="hidefloatie()">Coding Forums</a> | <a href="#" onMouseover="showfloatie(floattext[0], event, '#D9FFD9', 250, 100);modifylinks()">JavaScript Kit</a>
</body>
</html>
New Comer (less than 5 posts)
How to combine "Link Floatie script" & "Bullet Link script"?
Posting Permissions
Reply With Quote
Bookmarks