Onmouse over image link clickeble?

[rick003]

Hi,

I hope my english is good enough.

I have found a script from this website to give a onmouse over image.
That's great! Bron: http://www.dynamicdrive.com/dynamici...thumbnail2.htm

There is only a little bit confusing by using it. When you look at this link:
<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea,link:http://dynamicdrive.com">The Moon #1</a><br />

1- A image will appear
2- The image is clickeble

I only want that the link is clickeble to a website too.
Is this possible and does somebody know what i have to change?

Optionial: Maybe it is possible too that when the link or image is clicked, that other links with mouseover images "at the same site" is not a onmouse over for 5 seconds

Many thanks for your time!

[jscheuer1]

There's no ideal solution for this without a rewrite of the script. The mouseover link is already clickable. Doing so will take you directly to the image.

You can do this (add highlighted):

<a href="http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg" 
onclick="location.href = 'http://www.nasa.gov/vision/universe/solarsystem/hubble_moon.html'; return false;" 
rel="enlargeimage" rev="targetdiv:loadarea,link:http://dynamicdrive.com">The Moon #1</a>

Not ideal because on hover, the status bar will say:

http://www.nasa.gov/images/content/168177main_image_feature_749_ys_4.jpg

not:

http://www.nasa.gov/vision/universe/solarsystem/hubble_moon.html

Which is where it will take you. But other than that, it will work as you say you want. You may put any URL you want there in the highlighted section:

onclick="location.href = 'http://www.nasa.gov/vision/universe/solarsystem/hubble_moon.html'; return false;"

Like:

onclick="location.href = 'http://www.google.com/'; return false;"

or:

onclick="location.href = 'mypage.htm'; return false;"

As for:

Maybe it is possible too that when the link or image is clicked, that other links with mouseover images "at the same site" is not a onmouse over for 5 seconds

No point unless the link is opening in a frame, iframe, new window or new tab. Is it?

[rick003]

It works!

Thank you very much for your time!

Maybe it is possible too that when the link or image is clicked, that other links with mouseover images "at the same site" is not a onmouse over for 5 seconds
No point unless the link is opening in a frame, iframe, new window or new tab. Is it?
The mouse overs are working in a menu with 34 games.
When the clicked a game above in the menu and they gonna play it, they go with the mouse over other "game titles". I thought it would be nicer that a mouse over is disabled then for some seconds but it is not very importend. I think the visitors/ gamers will understand it anyway.

Thanks again!

[jscheuer1]

If you are using the method I gave you, there shouldn't be any menu, just the game, unless the menu is on every page. I can't stop something from happening unless I know how it's happening.

If the menu is on every page, change this (at the end of the thumbnailviewer2.js script):

jQuery(document).ready(function($){
	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
	$anchors.each(function(i){
		var options={}
		var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
		for (var i=0; i<rawopts.length; i++){
			var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
			options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
		}
		$(this).addthumbnailviewer2(options)
	})
})

to:

jQuery(document).ready(function($){
	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
	setTimeout(function(){
		$anchors.each(function(i){
			var options={}
			var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
			for (var i=0; i<rawopts.length; i++){
				var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
				options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
			}
			$(this).addthumbnailviewer2(options)
		});
	}, 5000);
})

The red 5000 is the delay, 5000 milliseconds or 5 seconds.

If you want no delay on the first page, remove the above from the thumbnailviewer2.js script and place it on each page that you want to have the delay. Put the original version of this function on the first page, example (modified from Step 1 on the demo page):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="thumbnailviewer2.js">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script type="text/javascript">
jQuery(document).ready(function($){
	var $anchors=$('a[rel="enlargeimage"]') //look for links with rel="enlargeimage"
	setTimeout(function(){
		$anchors.each(function(i){
			var options={}
			var rawopts=this.getAttribute('rev').split(',') //transform rev="x:value1,y:value2,etc" into a real object
			for (var i=0; i<rawopts.length; i++){
				var namevalpair=rawopts[i].split(/:(?!\/\/)/) //avoid spitting ":" inside "http://blabla"
				options[jQuery.trim(namevalpair[0])]=jQuery.trim(namevalpair[1])
			}
			$(this).addthumbnailviewer2(options)
		});
	}, 5000);
})
</script>

[rick003]

I made another solutions but I want to thank you very much for you help.