...
PDA

Image Tooltip over image

Bubble
10-03-2011, 02:41 AM
Hi,

Iīm searching a script which shows an image tooltip over an image. I donīt find something.
rangana
10-03-2011, 09:51 AM
Here's a couple of list here:
http://www.dynamicdrive.com/dynamicindex5/
Philip M
10-03-2011, 10:16 AM
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/2007/06/12/tooltips-scripts-ajax-javascript-css-dhtml/
http://www.tamingthebeast.net/articles6/tooltip-scripts-uses.htm


It is your responsibility to die() if necessary….. - PHP Manual
Bubble
10-03-2011, 07:03 PM
http://www.dynamicdrive.com/dynamicindex5/

I found this one: http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm but i want one without a sticky option.

http://coding.smashingmagazine.com/2...ipt-css-dhtml/
I donīt see an image tooltip over an image.

http://www.tamingthebeast.net/articl...ripts-uses.htm

Where is the download link for the .js file? Also the tooltip is a bit transparent.
xelawho
10-03-2011, 08:22 PM
a guy who used to be a regular here posted a very handy script like this here (http://www.codingforums.com/showthread.php?t=221837) - you should scroll to the bottom of the thread to see the polished version
Bubble
10-04-2011, 12:46 AM
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?
xelawho
10-04-2011, 01:12 AM
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 (http://xelawho.com/tooltips/)?
Bubble
10-04-2011, 01:33 AM
The javascript was just an idea. So can you tell me that code?
xelawho
10-04-2011, 01:41 AM
I'm showing you the link, here:
http://xelawho.com/tooltips/
Bubble
10-04-2011, 01:54 AM
<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. :/
xelawho
10-04-2011, 02:02 AM
:confused: css is in the source code, at the top
Bubble
10-04-2011, 02:31 AM
<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...
xelawho
10-04-2011, 02:32 PM
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...


<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>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum