| Author |
 Topic  |
|
|
MaGraham
Senior Member
USA
1297 Posts |
 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="" >
|
"Do all the good you can, by all the means you can, in all the ways you can, at all the times you can, to all the people you can, as long as ever you can." - John Wesley |
|
|
Carefree
Advanced Member
Philippines
4217 Posts |
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. |
 |
|
|
MaGraham
Senior Member
USA
1297 Posts |
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.
|
"Do all the good you can, by all the means you can, in all the ways you can, at all the times you can, to all the people you can, as long as ever you can." - John Wesley |
|
|
|
Carefree
Advanced Member
Philippines
4217 Posts |
Posted - 19 January 2014 : 00:42:45
|
Couldn't find the code there anymore, myself. Here's an alternative (without using javascript):
|
|
|
|
MaGraham
Senior Member
USA
1297 Posts |
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>
|
"Do all the good you can, by all the means you can, in all the ways you can, at all the times you can, to all the people you can, as long as ever you can." - John Wesley |
|
|
|
Carefree
Advanced Member
Philippines
4217 Posts |
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.
Here's the code with sample data.
|
Edited by - Carefree on 28 June 2014 16:05:23 |
|
|
|
golfmann
Junior Member
United States
450 Posts |
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
Advanced Member
Philippines
4217 Posts |
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
Junior Member
United States
450 Posts |
Posted - 29 June 2014 : 14:33:18
|
| ok |
|
|
|
MaGraham
Senior Member
USA
1297 Posts |
Posted - 29 June 2014 : 17:44:53
|
Oh wow!  I can hardly wait to try this! 
Thank you so much!
|
"Do all the good you can, by all the means you can, in all the ways you can, at all the times you can, to all the people you can, as long as ever you can." - John Wesley |
|
|
| |
Topic |
|
|
|
Code for onmouseover When Image Mapping
