SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict silentcollision's Avatar
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tooltip not working

    I'm attempting to create a list of design sites, and to give viewers a preview of what the site looks like, I thought I'd use a tooltip, with an image inside it.

    I looked at Dynamic Drive's Tooltip, and it looked great with text, here, but as soon as I tried putting in an image, it didn't work. The code's I've used are below:

    My CSS
    Code:
    #tt{
    	position: absolute;
    	width: 260px;
    	border-width: 1px;
    	border-style: dashed;
    	border-color: #333333;
    	padding: 2px 3px 3px 2px;
    	background-color: #ededed;
    	visibility: hidden;
    	z-index: 100;
    	font-family: Verdana, Arial, Sans-Serif;
    	font-color: #000000;
    	font-size: 12px;
    	}
    Dynamic Drive's Tooltip
    Code:
    <div id="tt"></div>
    <script type="text/javascript">
    var offsetxpoint=-60 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    var ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["tt"] : document.getElementById? document.getElementById("tt") : ""
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function ddrivetip(thetext, thecolor, thewidth){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
    return false
    }
    }
    
    function positiontip(e){
    if (enabletip){
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    
    var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
    
    context menu
    if (rightedge<tipobj.offsetWidth)
    
    tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else
    
    tipobj.style.left=curX+offsetxpoint+"px"
    
    
    if (bottomedge<tipobj.offsetHeight)
    tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
    else
    tipobj.style.top=curY+offsetypoint+"px"
    tipobj.style.visibility="visible"
    }
    }
    
    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }
    
    document.onmousemove=positiontip
    And finally, I made the links look like this:

    Code:
    <a href="http://www.2advanced.com" target="_blank" onMouseover="ddrivetip('<img src="images/_dlist/test.jpg" width="100" height="73">')"; onMouseout="hideddrivetip()">2advanced.com</a>
    And it didn't work, and changed the link so it read:

    Code:
    ')"; onMouseout="hideddrivetip()">2advanced.com
    I'm clueless when it comes to JavaScript. I don't know if this script is just incapable of having an image, but I don't see why :S. I tried using this script, because its exactly what I want to create, however it has an annoying pop-up if you use the unlicensed version, and I didn't like having to create individual JavaScript variables for each image, and it didn't work properly anyway.

    What I'm asking, is if adjusting the Dynamic Drive tooltip script, will enable me to use images inside the tooltip, and if so, how this would be done.

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try in css background-image:url(some-image.png) 0 0 no-repeat;

  3. #3
    SitePoint Addict silentcollision's Avatar
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion! It works, however there are two problems:

    The style #tt is relative to all the tooltips, not individual ones, and I'm not sure how to set individual styles. The other problem is that I'd have to create a style for every link, and with 153 links currently, that'd be a big stylesheet :S.

    Thanks for the idea, I might work on it.

    Edit:

    I tried the background-image method by using the following code in the links:

    Code:
        <a href="http://www.2advanced.com" target="_blank" onMouseover="ddrivetip('<div style="background-image: url(images/_dlist/1.jpg); background-position: center; background-repeat: no-repeat;"></div>')"; onMouseout="hideddrivetip()">2advanced.com</a>
    Didn't work , just got the weird JavaScript error.

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should remove events from html, here is quick edit of your script http://xy.wz.cz/ddltip/ , last link is for download. I don't know if you need for each link different image, or the same for all. So default image is set in css, and if you would like to have special image for some links you have to set their location in attribute rel. Tooltip takes text from attribute title.

  5. #5
    SitePoint Addict silentcollision's Avatar
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for the help, I think I understand it and I'll work it around and see what comes out.

  6. #6
    SitePoint Addict silentcollision's Avatar
    Join Date
    Jun 2006
    Location
    New Zealand
    Posts
    388
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry to be a pest, but I can't get this to work. I download the resources, and I've used them, however I still can't get it to work.

    You can view it here, and the first two links are set up so they *should* show the image, but they don't. Really frustrating :S

  7. #7
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didn't put there an id where function should be active, so replace
    Code:
    <div align="left">
    with
    Code:
    <div align="left" id="where">

  8. #8
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And this two lines
    Code:
    for(var i=0;i<hrf.length;i++){
    hrf[i].onmouseover=function(){tip(this)}
    you can replace with
    Code:
    for(var i=0;i<hrf.length;i++){
    hrf[i].setAttribute('target','_blank')
    hrf[i].onmouseover=function(){tip(this)}
    And then you don't have to write this target=_blank in each link


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
  •