UK Webmaster Talk - Online Marketing - SEO


 

Expanding Images

This is a discussion on Expanding Images within the Programming Articles forums, part of the Webmaster Articles/Tutorials category; Here's a great way to display your images in thumbnails and enlarge them on the page on mouseover. Simply make ...


Go Back   UK Webmaster Talk - Online Marketing - SEO > Webmaster Articles > Webmaster Articles/Tutorials > Programming Articles

Expanding Images Expanding Images

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Notices
Welcome to UK Webmaster Forums.

You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so please, join our community today!

If you have any problems with the registration process or your account login, please contact contact us.

Reply

 

LinkBack Thread Tools Display Modes
Old 23-04-2005, 21:53   #1 (permalink)
WMT Addict
 
Join Date: Apr 2005
Location: Singapore
Posts: 238
iTrader: 0 / 0%
Aaron has a spectacular aura about
Send a message via ICQ to Aaron Send a message via AIM to Aaron Send a message via MSN to Aaron Send a message via Yahoo to Aaron
Default Expanding Images
Here's a great way to display your images in thumbnails and enlarge them on the page on mouseover.

Simply make your images around 170 pixels by 125 pixels and the script will do the rest. In the example above we have used 5 images, yet with a little manipulation of the script you could add more or less if desired.

You will need to position the description layer to suit your page, more details below.

Installation:

Step 1

Copy and paste the code below into the head of your html document. Nothing to configure in this part.

Code:
<script language="JavaScript">
// Expanding images script  
<!--
function resizeImage(e)
{
	if (document.layers) { //Netscape 
        var xMousePos = e.pageX;
        var xMousePosMax = window.innerWidth+window.pageXOffset;
    } else if (document.all) { // IE
        var xMousePos = window.event.x+document.body.scrollLeft;
	} else if (document.getElementById) {//Netscape
		var xMousePos = e.pageX;
        var xMousePosMax = window.innerWidth+window.pageXOffset;
	}
	var i = (-1 * (((xMousePos/340) - (250/340)) * ((xMousePos/340) - (250/340)))) + 1;
	if (i < .4) i = .4;
	if (i > 2) i = 2;
	picture1.width=(170 * i);
	picture1.height=(125 * i);
	
	i = (-1 * (((xMousePos/340) - (420/340)) * ((xMousePos/340) - (420/340)))) + 1;
	if (i < .4) i = .4;
	if (i > 2) i = 2;
	picture2.width=(170 * i);
	picture2.height=(125 * i);
	
	i = (-1 * (((xMousePos/340) - (525/340)) * ((xMousePos/340) - (525/340)))) + 1;
	if (i < .4) i = .4;
	if (i > 2) i = 2;
	picture3.width=(170 * i);
	picture3.height=(125 * i);
	
	i = (-1 * (((xMousePos/340) - (600/340)) * ((xMousePos/340) - (600/340)))) + 1;
	if (i < .4) i = .4;
	if (i > 2) i = 2;
	picture4.width=(170 * i);
	picture4.height=(125 * i);
	
	i = (-1 * (((xMousePos/340) - (680/340)) * ((xMousePos/340) - (680/340)))) + 1;
	if (i < .4) i = .4;
	if (i > 2) i = 2;
	picture5.width=(170 * i);
	picture5.height=(125 * i);
}

function output(message)
{
	obj = eval("text");
	obj.innerHTML = "<font size=\"6\">"+message+"</font>";
}

function handleMouse()
{
	if (document.layers) { // Netscape
    	document.captureEvents(Event.MOUSEMOVE);
	    document.onmousemove = resizeImage;
	} else if (document.all) { // Internet Explorer
	    document.onmousemove = resizeImage;
	} else if (document.getElementById) { // Netcsape 6
	    document.onmousemove = resizeImage;
	}
}

function doNothing(e)
{
	var i = 0.4;
	picture1.width=(170 * i);
	picture1.height=(125 * i);
	picture2.width=(170 * i);
	picture2.height=(125 * i);
	picture3.width=(170 * i);
	picture3.height=(125 * i);
	picture4.width=(170 * i);
	picture4.height=(125 * i);
	picture5.width=(170 * i);
	picture5.height=(125 * i);
}
function ignoreMouse()
{
	if (document.layers) { // Netscape
	    document.captureEvents(Event.MOUSEMOVE);
    	document.onmousemove = doNothing;
	} else if (document.all) { // Internet Explorer
    	document.onmousemove = doNothing;
	} else if (document.getElementById) { // Netcsape 6
    	document.onmousemove = doNothing;
	}
}
//-->
</script>
Step 2

Copy and paste the code below into your html where you want the images to appear on your page. Change the links within to your own and the image src to reflect the images that you use.

Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td colspan="4" onMouseOver="ignoreMouse()"></td>
  </tr>
  <tr> 
    <td width="8" height="140" valign="bottom" onMouseOver="ignoreMouse()"> </td>
    <td width="142" valign="bottom" onMouseOver="handleMouse()"></td>
    <td width="889" valign="bottom" onMouseOver="handleMouse()"><nobr> <a href="http://pbungers.ibsz.com" target="_blank"><img name="picture1" src="image1.gif" width="68" height="50"onMouseOver="output('Palm Tree')" onMouseOut='output("")' border="0"></a> 
      <a href="http://pbungers.ibsz.com" target="_blank"><img name="picture2" src="image2.gif" width="68" height="50" onMouseOver="output('Family')" onMouseOut='output("")' border="0"></a> 
      <a href="http://pbungers.ibsz.com" target="_blank"><img name="picture3" src="image3.gif" width="68" height="50"onMouseOver="output('Family 1')" onMouseOut='output("")' border="0"></a> 
      <a href="http://pbungers.ibsz.com" target="_blank"><img name="picture4" src="image4.gif" width="68" height="50"onMouseOver="output('Menu Option 4')" onMouseOut='output("")' border="0"></a> 
      <a href="http://pbungers.ibsz.com" target="_blank"><img name="picture5" src="image5.gif" width="68" height="50"onMouseOver="output('Menu Option 5')" onMouseOut='output("")' border="0"></a> 
      </nobr></td>
    <td width="3" valign="bottom" onMouseOver="ignoreMouse()">&nbsp;</td>
  </tr>
   <tr> 
    <td height="10" colspan="4" onMouseOver="ignoreMouse()"></td>
  </tr>
</table>
Step 3

Copy the code below and paste this below step 2 within your html source. Change the left and top pixel figures to suit the position of the text description on your page layout.

Code:
style="position:absolute; left:166px; top:527px; width:665px; height:94px; z-index:1" onMouseOver="ignoreMouse()"></div>
Aaron is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

Tags
expanding, images

« Change Scroller Colour | Php Links + images form Mysql db. »
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads

Thread Thread Starter Forum Replies Last Post
Protect images ClockworkOrange HTML, DHTML and CSS 1 21-08-2006 18:18
Fading Images asgsoft Website Design Articles 23 08-08-2005 19:15
Goodbye images! Lewis Website Design Forum 10 28-07-2005 19:19
HTML Images Bmg Programming Articles 0 07-04-2005 16:24


All times are GMT +1. The time now is 16:53.

Contact Us - UK Webmaster Forum - Archive - Privacy Statement - Top

Powered by vBulletin® Version 3.7.3
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0
UK Webmaster Forum © WebmasterTalk.co.uk | Design by Forbairt

Ad Management by RedTyger

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41