Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image Tooltip over image

    Hi,

    I´m searching a script which shows an image tooltip over an image. I don´t find something.

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Here's a couple of list here:
    http://www.dynamicdrive.com/dynamicindex5/
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by Bubble View Post
    Hi,

    I´m searching a script which shows an image tooltip over an image. I don´t find something.
    You have not tried very hard! Google brings up many examples.
    e.g. http://coding.smashingmagazine.com/2...ipt-css-dhtml/
    http://www.tamingthebeast.net/articl...ripts-uses.htm


    It is your responsibility to die() if necessary….. - PHP Manual
    Last edited by Philip M; 10-03-2011 at 11:20 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found this one: http://www.dynamicdrive.com/dynamici...ckytooltip.htm but i want one without a sticky option.

    I don´t see an image tooltip over an image.

    Where is the download link for the .js file? Also the tooltip is a bit transparent.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    a guy who used to be a regular here posted a very handy script like this here - you should scroll to the bottom of the thread to see the polished version

  • #6
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It shouldn´t be a "ballon" design- just a normal box. Is there really no script which simply shows an image tooltip over an image?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    I guess most people if all they want is for a div to appear/disappear on mouseover/mouseout they just code it that way - it's about 5 lines of code, hardly worth making a separate script for. Did you see this?

  • #8
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The javascript was just an idea. So can you tell me that code?

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    I'm showing you the link, here:
    http://xelawho.com/tooltips/

  • #10
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <div id="mainbloc">
    <img id="question" src="images/question_mark.png" "="" alt="">
    <div style="display: none;" id="tooltipdiv" class="shadow">
    <p>css tooltip with hidden div</p>
    <img src="image1.jpg">
    </div>
    </div>
    Ok that´s the code. But how the css looks like. I´m not very smart with that- sorry. :/

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    css is in the source code, at the top

  • #12
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <style type="text/CSS">
    #tooltipdiv {
    	padding:0px;
    	display:none;
    	position:absolute;
    	margin-left:20px;
    float:left;
    			font-family: sans-serif;
    			border:1px solid black;
    }
    
    #tooltipdiv2 {
    	padding:0px;
    	display:none;
    float:left;
    			font-family: sans-serif;
    			border:1px solid black;
    			text-align:center;
    			margin: auto;
    }
    
    .shadow {
    	-moz-box-shadow: 3px 3px 4px #000;		
    	-webkit-box-shadow: 3px 3px 4px #000;		
    	box-shadow: 3px 3px 4px #000;		
    	/* For IE 8 */		-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000')";		
    	/* For IE 5.5 - 7 */		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000');
    }
    	
    #cross {
    float:right; 
    margin:5px;
    cursor:pointer; 
    }
    
    #question {
    float:left;
    overflow:auto; 
    }
    
    #question2 {
    float:left;
    overflow:auto;
    	margin-right:10px;
    	cursor:pointer;
      
    }
    
    
    #tooltipdiv p {
    	font-family:sans-serif;
    	font-size:12px;
    	margin:2px 0px 0px 0px;
    	padding:2px 0px 2px 0px;
    	background-color:white;
    text-align:center;
    }
    
    #mainbloc {
    	margin:0px 0px 0px 0px;
    	padding:0px;
    }
    </style>
    
    <div id="mainbloc">
    <img id="question" src="/pick.png"" alt="" />
    <div id="tooltipdiv" class="shadow">
    <p>css tooltip with hidden div</p>
    <img src="/pic2.png">
    </div>
    </div>
    So thats the code which i put in the top of my page. I can see the image, but there is no mouseover.

    Don´t know what i am doing wrong...

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    here is a very simple version. this supposes that you have multiple images and you want their pop up images to be unique, but it will work for just one as well. all you need to do is name the pic you want to show base.jpg and the popup pic popup.jpg

    and base2.jpg, popup2.jpg, etc...

    Code:
    <html>
    <head>
    </head>
    <body>
    <style>
    .pops{
    display:none;
    position:absolute;
    }
    </style>
    
    <div style="float:left">
    <img id="pop" src="popup.jpg" class="pops">
    <img src="base.jpg" onmouseover="showHide('block','pop')"; onmouseout="showHide('none','pop')">
    </div>
    <div style="float:right">
    <img id="pop2" src="popup2.jpg" class="pops">
    <img src="base2.jpg" onmouseover="showHide('block','pop2')"; onmouseout="showHide('none','pop2')">
    </div>
    <script type="text/javascript">
    function showHide(style,img) {
    document.getElementById(img).style.display=style;
    }
    </script>
    </body>
    </html>


  •  

    Posting Permissions

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