Want to Mouse Over the following link and ...

**Boomerkel** · 03-10-2008, 12:20 AM

I need to know how to create code to mouse over the following link and be able to display first page of the document ... can it be done and how? Thanks for your help ... Here is the sample code:

<html>

<head>

<body>
 

 

<a href="http://www.geocities.com/omegareport/1930-1939.htm">Behind the Gemstone Files</a>

</body>

</html>

When I move mouse over link that says "Behind the Gemstone Files" I would like a small(or mediumsize) image(in a box) to pop up next to that link. Within that box would be a preview of the page that the link points to. If I move mouse away from link the box(with preview) disappears. If I move the mouse back over the link the preview box reappears. If I then left click while over the link (while the preview box is displaying) it would send me to that new page, but I would like it to open a new window so as not to revert from the original page.

Here is a perfect example of what I want to show ... go to this link and mouse over any of these threads and a box will appear revealing part of the thread ... http://www.dynamicdrive.com/forums/s...archid=2376156

**codeexploiter** · 03-10-2008, 06:23 AM

Save the code and check whether you are trying to achieve this or not

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title> </title>
		<style type="text/css">
		
		</style>
		<script type="text/javascript">
		var linkMouseOver = function(lnk){
			location.href = lnk.href;
		}
		
		var linkDivOver = function(url){
			location.href = "http://www." + url;
		}
		</script>
	</head>
	<body>
		<p>First Method using Anchor elements. Hover your mouse over the links listed</p>
		<div>
			<a href="http://www.google.com" target="" onmouseover="linkMouseOver(this);">Google</a> <br/>
			<a href="http://www.yahoo.com" target="" onmouseover="linkMouseOver(this);">Yahoo!</a> <br/>
			<a href="http://www.msn.com" target="" onmouseover="linkMouseOver(this);">MSN</a> <br/>
		</div>
		<p>Second Method using any HTML containers like div/span. Hover your mouse over the titles</p>
		<div style="width: 100px; border:1px solid red;">
			<div onmouseover="linkDivOver('google.com');" style="border-bottom:1px solid #000;">Google</div>
			<div onmouseover="linkDivOver('yahoo.com');" style="border-bottom:1px solid #000;">Yahoo!</div>
			<div onmouseover="linkDivOver('msn.com');" style="border-bottom:1px solid #000;">MSN</div>
		</div>
		
	</body>
</html>

**Boomerkel** · 03-10-2008, 12:17 PM

codeexploiter that was nice, but not quite what I'm looking for. As usual I did not properly explain what I'm looking for.

When I move mouse over link that says "Behind the Gemstone Files" I would like a small(or mediumsize) image(in a box) to pop up next to that link. Within that box would be a preview of the page that the link points to. If I move mouse away from link the box(with preview) disappears. If I move the mouse back over the link the preview box reappears. If I then left click while over the link (while the preview box is displaying) it would send me to that new page, but I would like it to open a new window so as not to revert from the original page.

codeexploiter ... appreciate your help

**Medyman** · 03-10-2008, 01:30 PM

If I undestand you correctly, you have two options.

You can manually create the screenshots/images that you want to appear in the tooltip and use any of a number of scripts here:
http://www.dynamicdrive.com/dynamicindex5/index.html

Or you can use something like iWEBTOOL to create the images for you. http://thumbnails.iwebtool.com/demo/

**Boomerkel** · 03-10-2008, 03:32 PM

I need to know how to create code to mouse over the following link and be able to display first page of the document ... can it be done and how? Thanks for your help ... Here is the sample code:

<html>

<head>

<body>
 

 

p <a href="http://www.geocities.com/omegareport/1930-1939.htm">Behind the Gemstone Files</a>
</body>

</html>

Comment: Initially, this code is not going onto a web page ... I'm placing it into a forum environment ... Can I still accomplish the task?

When I move mouse over link that says "Behind the Gemstone Files" I would like a small(or mediumsize) image(in a box) to pop up next to that link. Within that box would be a preview of the page that the link points to. If I move mouse away from link the box(with preview) disappears. If I move the mouse back over the link the preview box reappears. If I then left click while over the link (while the preview box is displaying) it would send me to that new page, but I would like it to open a new window so as not to revert from the original page.

Here is a perfect example of what I want to show ... go to this link and mouse over any of these threads and a box will appear revealing part of the thread ... http://www.dynamicdrive.com/forums/s...archid=2376156

**Medyman** · 03-11-2008, 03:38 AM

Did you look at what I posted above?

What you want is exactly there! If you're having trouble understanding the instructions, that's another issue but it's all there.

I think this scripts fits you the best.
http://www.dynamicdrive.com/dynamici...agetooltip.htm

Note: you'll have to manually specify which image to show in the tooltip.

**codeexploiter** · 03-11-2008, 07:13 AM

The following is a site that offers the service of generating site thumbnails freely. You can use this one for your usage. Go through their site for learning more about its usage.

http://picoshot.com/

I've created a sample page that demonstrates its usage

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title> </title>
		<script type="text/javascript">
		var hoverMouse = function(url,flag,obj){
			if(obj)
				var leftTop = findPos(obj);
			
			if(flag == 1){
				document.getElementById('thumbnail').style.left = (leftTop[0]+150) + "px";
				document.getElementById('thumbnail').style.top =  leftTop[1] + "px";
				document.getElementById('thumbnail').firstChild.src = 'http://image.picoshot.com/thumbnail.php?url=' + url;
				document.getElementById('thumbnail').style.display = 'block';
			}else	
				document.getElementById('thumbnail').style.display = 'none';
		}
		
		function findPos(obj) {
			var curleft = curtop = 0;
			if (obj.offsetParent) {
				do {
					curleft += obj.offsetLeft;
					curtop += obj.offsetTop;
				} while (obj = obj.offsetParent);
				return [curleft,curtop];
			}
		}
		</script>
		<style type="text/css">
			#thumbnail{
				position: absolute;
				left: 0;
				top: 0;
				display: none;
				border: 1px solid #000;			
				width: 100px;
				height:80px;					
			}
		</style>
	</head>
	<body>
		<div> 
			<div id="google" onmouseover="hoverMouse('http://www.google.com',1,this);" onmouseout="hoverMouse('',0,'');">Google &nbsp;</div><br/>
			<div id="yahoo" onmouseover="hoverMouse('http://www.yahoo.com',1,this);" onmouseout="hoverMouse('',0,'');">Yahoo! &nbsp;</div><br/>
			<div id="msn" onmouseover="hoverMouse('http://www.msn.com',1,this);" onmouseout="hoverMouse('',0,'');">MSN &nbsp;	</div><br/>
			<div id="yourpage" onmouseover="hoverMouse('http://www.geocities.com/omegareport/1930-1939.htm',1,this);" onmouseout="hoverMouse('',0,'');">Geocities - Your page &nbsp;</div><br/>
		</div>		
		<div id="thumbnail"><img src="1.gif" border="0" width="100%" /></div>
	</body>
</html>

Please note that this is just an example and can be improved for your purpose. After saving the source hover your mouse over the titles displayed on it and you can view a thumbnail associated with the title.