Total members 11864 |It is currently Thu Dec 09, 2021 5:56 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





In example we enlarge image when mouse-over using JavaScript, the we have to versions of images , one is small and one is large , when mouse is over the small image a the larger version appears automatically.

javascript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Show larger image when mouseover</title>
<script language="javascript" src="js/prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="javascript" src="js/preview_templates.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--

function loadPre(id,name,ref,w,h){
new TemplatePreview(id, {
title: name,
src: ref,
width: w,
height: h });
}
// -->

</script>

</head>

<body>
<center>
<img src='Template/Images/c1.gif'
width='15' height='15' class='corner'
style='display: none' /></div> <center><a href='styleview/phpbb3/TTT2/19'><strong>TTT2</strong><br /><img name='images/19.PNG' alt=TTT2 src='images/19.PNG'
border='1'
style='border-color: 777777;'
id = 'tpl_19'/></a><br /> <script type="text/javascript">
image = new Image;
image.src = 'images/19_2.PNG';
new TemplatePreview('tpl_19', {
title: 'Template 19',
src: image.src,
width: image.width,
height: image.height });

</script>

</center>

</body>


</html>





Attachments:
File comment: example of running the script
Enlarge.gif
Enlarge.gif [ 48.58 KiB | Viewed 11167 times ]
File comment: Enlarge image using JavaScript (Full Package)
Enlarge-image.rar [239.9 KiB]
Downloaded 1284 times

_________________
M. S. Rakha, Ph.D.
Queen's University
Canada
Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : enlarge image when mouseover using javascript
 enlarge first letter in html paragraph     -  
 Image-Viewer-Image Processing-Filters-Noise-enhancements     -  
 Move image in front of a background image     -  
 different between cfa image and gray level image     -  
 PNG image to the image you generated     -  
 using javascript     -  
 need help with javascript     -  
 Javascript     -  
 JavaScript     -  
 what is javascript ?     -  



Topic Tags

JavaScript Events, JavaScript Image






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com