Bullet image link script(make it appear to right of link)

[glz]

1) Bullet Image Link Script

2) http://www.dynamicdrive.com/dynamici...bulletlink.htm

3) Describe problem:

What changes in the javascript code would I need to make to make the image display to the right of the link instead of to the left.

-Thank you

[Locky]

try this works in FF and ie7

<style type="text/css">

.bulletimagestyle{ /*Absolute position bullet image. No need to modify*/
position: absolute;
left: -200px;
}

</style>

<script type="text/javascript">

/***********************************************
* Bullet Link script- © Dynamic Drive DHTML code library ([url]www.dynamicdrive.com[/url])
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at [url]http://www.dynamicdrive.com/[/url] for full source code
***********************************************/

//Define your bullet image(s) via arbitrary variables, where bulletimg=["imagepath", imagewidth, offsetxfromroot, offsetyfromroot]
var bulletimg1=["greenup.gif", 13, 2, 0]
var bulletimg2=["search.gif", 16, 4, 0]

////Stop editting here/////////////////////
var classnameRE=/(^|\s+)ddbullet($|\s+)/i //regular expression to screen for classname within element

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){
var reltovar=window[linkobj.getAttribute("rel")]
bulletobj.setAttribute("src", reltovar[0])
bulletobj.style.left="100px"
bulletobj.style.top=caloffset(linkobj, "top")-reltovar[3]+"px"
bulletobj.style.visibility="visible"
}

function modifylinks(){
bulletobj=document.createElement("img")
bulletobj.setAttribute("id", "bulletimage")
bulletobj.className="bulletimagestyle"
document.body.appendChild(bulletobj)
for (i=0; i<document.links.length; i++){
if (typeof document.links[i].className=="string" && document.links[i].className.search(classnameRE)!=-1){
document.links[i].onmouseover=function(){displaybullet(this)}
document.links[i].onmouseout=function(){bulletobj.style.visibility="hidden"}
}
}
}

if (window.addEventListener)
window.addEventListener("load", modifylinks, false)
else if (window.attachEvent)
window.attachEvent("onload", modifylinks)
else if (document.getElementById || document.all)
window.onload=modifylinks

</script>

[glz]

i don't really see what you changed in the script, but this does not work it puts the image in the middle of the link instead of the right

next could you specify what you changed in the script as well?
-thanks thats how I learn

[Locky]

the bit were it calculates the offset is what was changed i will have a play later on see wht i can do

[glz]

any luck?

what i have noticied is that if i play with this number:
bulletobj.style.left="145px"

it will display correctly, but it is dependent on how much your browser window is maximed, or the dimensions of ur browser window

for example:
bulletobj.style.left="145px"

that displays it correctly when it is fullscreen

but if u make the browser window smaller, it will go far more to the right of the link (the bullet image)


how do I fix that?