Advanced Search

Results 1 to 5 of 5

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

  1. #1
    Join Date
    Mar 2007
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Mar 2007
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    try this works in FF and ie7

    HTML Code:
    <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>

  3. #3
    Join Date
    Mar 2007
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2007
    Posts
    23
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Mar 2007
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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?

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •