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

Quote:

Originally Posted by Bubble

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

Bubble · 10-03-2011, 07:03 PM

Quote:

http://www.dynamicdrive.com/dynamicindex5/

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

Quote:

http://coding.smashingmagazine.com/2...ipt-css-dhtml/

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

Quote:

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

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

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. :/

xelawho · 10-04-2011, 02:02 AM

css is in the source code, at the top

Bubble · 10-04-2011, 02:31 AM

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

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

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>