By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,950 Members | 1,032 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,950 IT Pros & Developers. It's quick & easy.

Help me for a few lines of script

P: n/a
Hi

I am new to JS and want to add some actions to a few images. Can somebody
help to complete the codes for me.

I need 2 functions:

(1)
Original small image size,
would like to enlarge to say 400x400px on mouse over.

(2)
on mouse down
open a new window and load a specific html page.

<html>
<head>
<script type="text/javascript">

function enlargeimage()
{
???
}

function newwindow()
{
Open a new window
load pagename.html
}

</script>
</head>

<body>

<image1>
on mouse over
enlargeimage()
on mouse out
return to original size

set var pagename="test1"
on mouse down
newwindow()
<image2>
on mouse over
enlargeimage()
on mouse out
return to original size

set var pagename="test2"
on mouse down
newwindow()
<image3>
on mouse over
enlargeimage()
on mouse out
return to original size

set var pagename="test3"
on mouse down
newwindow()

</body>
</html>

Jan 31 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On 2006-01-31, Bizcatone <bi*******@netvigator.com> wrote:
Hi

I am new to JS and want to add some actions to a few images. Can somebody
help to complete the codes for me.

I need 2 functions:

(1)
Original small image size,
would like to enlarge to say 400x400px on mouse over.

(2)
on mouse down
open a new window and load a specific html page.

here's one I prepared earlier.

small images are "thumbs/imgname.jpg"
mid-size are "palms/imgname.jpg"
full-size are "imgname.jpg"

wihout script the page is totally broken, you could turn the images into
links to fix some of that.

(but you could modify it to open an HTML page instead of the bare image on
the filename if you want...)

shown with three images, but the real thing has 1000 and is generated using
PHP.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
img { padding: 2px; }
</style><title>Pics</title></head>
<link href="catalogue.ico" rel="shortcut icon" type="image/x-icon">
<body>
<h4 title="point to enlarge, click for full size">Photo Album</h4>
<div style="position: absolute; top: 100px; left: 100px;z-index: 10;
display: none;">
<img id="magnifier" src="" alt=""/></div>
<div id="thumbs">
<img src="thumbs/imgp0587.jpg" title="14/11/2004 13:22:04"/>
<img src="thumbs/imgp0663.jpg" title="07/01/2005 01:27:32"/>
<img src="thumbs/imgp0667.jpg" title="07/01/2005 01:52:26"/>
</div> <script type="text/javascript">;
document.getElementById('thumbs').onmouseover=lert ;
document.getElementById('thumbs').onmouseout=lert;
document.getElementById('thumbs').onclick=kick;

var mag=document.getElementById('magnifier');
var dyv=mag.parentNode;
var targ="...";

function lert(v){
if(!v) v=window.event;
var e={X: v.clientX ,Y: v.clientY};

var img=new Image();
ot=v.originalTarget;
if(!ot) ot=v.srcElement;
img.onload=align;
if(ot.src)img.src=targ=ot.src.replace('/thumbs/','/palms/')
if(ot.src)window.status=ot.src.replace('/thumbs/','/');
else{ dyv.style.display='none'; targ=false; return }

function align(){
if(! img.src || !img.width || !targ || mag.src==targ )return;
dyv.style.display='';
dyv.style.top=0;//50;
mag.src=img.src;
var winWidth, winHeight, d=document,scrollx,scrolly;

if (typeof window.innerWidth!='undefined') {
winWidth = window.innerWidth;
winHeight = window.innerHeight;
scrollx=window.scrollX;
scrolly=window.scrollY;
} else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth!='undefined' &&
d.documentElement.clientWidth!=0)
{
winWidth = d.documentElement.clientWidth;
winHeight = d.documentElement.clientHeight;
scrollx = d.documentElement.scrollLeft;
scrolly = d.documentElement.scrollTop;
} else {
if (d.body && typeof d.body.clientWidth!='undefined') {
winWidth = d.body.clientWidth;
winHeight = d.body.clientHeight;
scrollx = d.body.scrollLeft;
scrolly = d.body.scrollTop;
}
}
}
dyv.style.left=scrollx+(((e.X-scrollx)<(winWidth/2))?
winWidth-img.width-20:5)+"px";
dyv.style.top=scrolly+(((e.Y-scrollx)<(winHeight/2))?
winHeight-img.height-6:5)+"px";
}
return true;
}

vin=null;
function kick(v){
if(!v) v=window.event;
var e={layerX: v.layerX,layerY: v.layerY};
var img=new Image();
var ot=v.originalTarget;
if(!ot) ot=v.srcElement;
var p=ot.src.replace('/thumbs/','/');
try
{
if(!vin.document) vin=window.open(p)
else vin.document.location=p
}
catch(f)
{
vin=window.open(p)
}
return false
}
</script>
&copy;2006 Jasen Betts</body></html>
--

Bye.
Jasen
Feb 3 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.