Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
 All Forums
 Community Forums
 Community Discussions (All other subjects)
 Code for onmouseover When Image Mapping

Note: You must be registered in order to post a reply.
To register, click here. Registration is FREE!
Before posting, make sure you have read this topic!

Screensize:
UserName:
Password:
Format Mode:
Format: BoldItalicizedUnderlineStrikethrough Align LeftCenteredAlign Right Horizontal Rule Insert HyperlinkInsert EmailInsert Image Insert CodeInsert QuoteInsert List
   
Message:

* HTML is OFF
* Forum Code is ON
Smilies
Smile [:)] Big Smile [:D] Cool [8D] Blush [:I]
Tongue [:P] Evil [):] Wink [;)] Clown [:o)]
Black Eye [B)] Eight Ball [8] Frown [:(] Shy [8)]
Shocked [:0] Angry [:(!] Dead [xx(] Sleepy [|)]
Kisses [:X] Approve [^] Disapprove [V] Question [?]

 
   

T O P I C    R E V I E W
MaGraham Posted - 18 January 2014 : 02:15:31

I am playing around with Image Mapping and trying to add the "onmouseover" effect to display a larger picture (there's a bunch of tiny images on one large image) for the mouseover effect.

Can someone help?


<area shape="rect" coords="1076,5,1125,54" href="URL link here" target="_self" alt="Picture Name Here" onmouseover="" >
9   L A T E S T    R E P L I E S    (Newest First)
MaGraham Posted - 29 June 2014 : 17:44:53

Oh wow! I can hardly wait to try this!

Thank you so much!

golfmann Posted - 29 June 2014 : 14:33:18
ok
Carefree Posted - 29 June 2014 : 05:50:46
Golfman, she isn't trying to resize any images. She intends to create an image map (with clickable hyperlinked areas of the photo) and wanted a mouseover, popup effect for the different sections of the mapped photo.
golfmann Posted - 28 June 2014 : 16:22:03
resizeimgs.js


document.writeln("<link rel=stylesheet type=text/css href='resizeimgs.css'>");
document.writeln("<div id=showimage style='position:absolute;visibility:hidden;border:1px solid black'></div>");


// =============================================================================
// Begin user defined variables
// =============================================================================
var resizeType = 1; // 0 = Dynamically resize to a fraction of the users desktop
// width divided by the dynamicDivisor variable below.
// (i.e. 1024/4 = 256 or 1280/4 = 320)
// 1 = Resize the image if it is wider than the fixedWidth
// variable below
var enlargeType = 0 // 0 = Opens in the same window
// 1 = Opens in a new window
var fixedWidth = 480; // Resize the image if it is wider than this many
// pixels. Only used when resizeType = 1.
var dynamicDivisor = 0; // Resize images to users screen width divided by
// this number. Only used when resizeType = 0.
var alignClose = "left"; // Values are 'left' or 'right'. Default is right.
var topSpacing = 25; // Spaces the pop-up window this number of pixels
// from the top of the window
var leftSpacing = 25; // Spaces the pop-up window this number of pixels
// from the left of the window
// =============================================================================
// End of user defined variables
// =============================================================================




// =============================================================================
// Do not modify below this line
// =============================================================================
var ie=document.all
var ns=document.layers
var ns6=document.getElementById&&!document.all
var nsx,nsy,nstemp

function walkImages(){
re = /^img/;
if (document.images){
for (a=0;a<document.images.length;a++){
if (re.test(document.images[a].name)) resizeImage(document.images[a]);
}
}
}

function doimage(imgObj,event){
if (document.images) enlargeimg(imgObj,event);
}

//Thumbnail image viewer-
//© Dynamic Drive (www.dynamicdrive.com)

function resizeImage(thisimage) {
if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
if (thisimage.width > fixedWidth) {
thisimage.width = fixedWidth;
thisimage.style.cursor='pointer';
thisimage.title='Click the image to enlarge';
}
}

function enlargeimg(which,e){
if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
if (which.width < fixedWidth) {return false;}
if (enlargeType == 0) {
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (crossobj.style.visibility=="hidden"){
crossobj.style.left = (ns6? pageXOffset : document.body.scrollLeft) + leftSpacing
crossobj.style.top = (ns6? pageYOffset : document.body.scrollTop) + topSpacing
alignRE = /^left$/i
crossobj.innerHTML= (alignRE.test(alignClose))? '<div class=tvhead align=left id=drag> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> <span class=tvclose onClick=closepreview()>Close</span> </div><img src="'+which.src+'">' : '<div class=tvhead align=right id=drag> <span class=tvclose onClick=closepreview()>Close</span> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> </div><img src="'+which.src+'">';
crossobj.style.visibility="visible"
}
else
crossobj.style.visibility="hidden"
return false
}
else if (document.layers){
if (document.showimage.visibility=="hide"){
document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which.src+'" border=0></a>')
document.showimage.document.close()
document.showimage.left=e.x
document.showimage.top=e.y
document.showimage.visibility="show"
}
else
document.showimage.visibility="hide"
return false
}
else
return true
}
else if (enlargeType == 1) {
eval('window.open("showpic.asp?pic=' + which.src + '","","width='+which.width+'px,height='+which.height+'px,resizable=1,scrollbars=0")')
}
}


function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_dropns(name){
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx
crossobj.style.top=tempy+e.clientY-offsety
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="drag"||ns6&&e.target.id=="drag"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
document.onload=walkImages();
Carefree Posted - 28 June 2014 : 15:44:22
This is an old topic, but I just stumbled on it and realized I never answered. Sorry it took so long.

Here's how you do it. All the pieces of the same color should have the same value. With the exception of the "(document.images)", anything in parentheses should be replaced with the proper data, the parentheses should not remain.


<html>
	<head>
		<title>Your Image Map</title>
	</head>
	<body>
		<img name="(Large Pic Name Here)" src="(Large Pic URL Here)" width="(Large Pic Width Here)" height="(Large Pic Height Here)" border="(0 = off, 1 = on)" usemap="#(Large Pic Name Here)" alt="" />
		<map name="(Large Pic Name Here)">
			<area shape="poly" coords="186,382,194,262" href="(Target URL Here)" target="_blank" alt="(Title Here)"
				onMouseOver="if(document.images) document.(Large Pic Name Here).src='(PopUp Image URL Here)';" 
				onMouseOut="if(document.images) document.(Large Pic Name Here).src='(Large Pic URL Here)';" />
			<area shape="rect" coords="286,382,286,402" href="(Target URL Here)" target="_self" alt="(Title Here)"
				onMouseOver="if(document.images) document.(Large Pic Name Here).src='(PopUp Image URL Here)';" 
				onMouseOut="if(document.images) document.(Large Pic Name Here).src='(Large Pic URL Here)';" />
		</map>

	</body>
</html>


Here's the code with sample data.


<html>
	<head>
		<title>Your Image Map</title>
	</head>
	<body>
		<img name="large_pic" src="large_pic.png" width="800" height="600" border="0" usemap="#large_pic" alt="" />
		<map name="large_pic">
			<area shape="poly" coords="186,382,194,262" href="http://forum.snitz.com/forum/default.asp" target="_blank" alt="Snitz Forums 2000"
				onMouseOver="if(document.images) document.large_pic.src='small_pic1.png';" 
				onMouseOut="if(document.images) document.large_pic.src='large_pic.png';" />
			<area shape="rect" coords="286,382,286,402" href="http://cnn.com" target="_self" alt="CNN International News"
				onMouseOver="if(document.images) document.large_pic.src='small_pic2.png';" 
				onMouseOut="if(document.images) document.large_pic.src='large_pic.png';" />
		</map>

	</body>
</html>
MaGraham Posted - 19 January 2014 : 12:02:04

quote:
Originally posted by Carefree

Couldn't find the code there anymore, myself.


Well, that helps me to not feel so stupid! (lol)

Is your script just for single pictures though, Carefree?

I have an image that's 1130px x 162px and it has 50 tiny images on it. I've done image mapping to create links to forums for each of the images but thought it would be cool to have the mouseover effect and show a large pic of each tiny image.

Do you think the 50 tiny images on this image is just too much for mouseover effect to even work? Am I not fully understanding this?

Here's everything Paint Shop Pro came up with when I tried to do the mouseover while doing the image mapping.


<img name="large_pic_with_the_50_tiny_images_name_here" src="/images/large_pic_with_the_50_tiny_images_name_here.png" width="1130" height="162" border="0" usemap="#large_pic_with_the_50_tiny_images_name_here">

<map name="large_pic_with_the_50_tiny_images_name_here">
<area shape="rect" coords="56,4,106,54" href="Forum Link Here" target="_self" alt="Title Name"
title="Title Name" onmouseover="if(document.images) document.large_pic_with_the_50_tiny_images_name_here.src='/forum/images/mouseover_image_name_here.png';" ></map>
Carefree Posted - 19 January 2014 : 00:42:45
Couldn't find the code there anymore, myself. Here's an alternative (without using javascript):


Put this code into your head block:

	<style type="text/css">
		.thumbnail{
			position: relative;
			z-index: 0;
		}
		.thumbnail:hover{
			background-color: transparent;
			z-index: 50;
		}
		.thumbnail span{ /*CSS for original or enlarged image*/
			position: absolute;
			background-color: lightblue;
			padding: 5px;
			left: -800px;
			border: 1px dashed silver;
			visibility: hidden;
			color: black;
			text-decoration: none;
		}
		.thumbnail span img{ /*CSS for original or enlarged image*/
			border-width: 0;
			padding: 2px;
		}
		.thumbnail:hover span{ /*CSS for hovered image*/
			visibility: visible;
			top: 0;
			left: 60px; /*horizontal offset */
		}
	</style>

Now, where you have your images, use this type of coding (NOTE:
you can make a thumbnail version of a photo and store two separate images, or simply miniaturize the same image for the thumbnail by limiting the height/width):

<a class="thumbnail" href="#thumb"><img src="images/mypix_thumbnail.jpg" width="100px;" height="100px;" border="0" /><span><img src="images/mypix.jpg" /><br />Mypix</span></a>
MaGraham Posted - 18 January 2014 : 23:47:15

Could you give a more specific link, Carefree? They don't have a website search; it's a Google search.
Carefree Posted - 18 January 2014 : 10:53:02
In order to enlarge the images, you need a javascript routine or something similar to actually perform the task. The onmouseover will simply activate the script. See this for an example.

Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.09 seconds. Powered By: Snitz Forums 2000 Version 3.4.07