Member Avatar for tonitone

Hi - i was wondering if someone could help me.

I'm creating a web page which has a large image on it. The image is too large to fit in my page template so that it is easily readable so i want to be able enlarge parts of the image either onmouseover or onclick. I want the enlarged part of the image to be displayed on the same page on top of the original image (so it's still visible inthe background). Is there a way to do this?

I have been trying to find a solution for a few days now and can find out how to grow/shrink and image, swap an image etc etc, but haven't been able to find anything to help me achieve what i want.

Any help would be greatly appreciated.

Thanks
tonitone

  • 2 Contributors
  • 5 Replies
  • 116 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by tonitone

Recommended Answers

All 5 Replies

Member Avatar for tonitone

OK, just to update - i think i can get the enlarged part of the image to display on the same page if i use a popup window, however i don't know how to set the popup so that it hovers over my original image rather than appearing next to it or underneath it.

Ideally what i'm trying to do can be seen in any of the forum lists on this site, a semi-transparent text box appears if you hover over a thread link but i want to do this using images instead of text.

Any ideas are welcome.

Thanks

Member Avatar for almostbob

the same effect with layers, is better, looks like a popup, and cant get blocked,
this is one possibility
(I know tables suck, but you can get the code right)
you could replace the button with image mapping the small image so the area clicked on expands to fill the layer

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<style>
<!--
.top { background-color: #000070; color: #ffffff; text-align: right; }
.bottom {  background-color: #efefef; padding: 15px; }
-->
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false; //ie
function hideIt() {
 if (dom) {document.getElementById("layer1").style.visibility='hidden';} 
 if (document.layers) {document.layers["layer1"].visibility='hide';} }  //firefox
function showIt() {
 if (dom) {document.getElementById("layer1").style.visibility='visible';}
 if (document.layers) {document.layers["layer1"].visibility='show';} }
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<button onClick="showIt();">Big image</button>
<div id="layer1" style="position:fixed; left:20px; width:45%; top:20px; visibility:hidden;">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td Align="right" onClick="hideIt()" class="top">
<font Color="#ffffff"><Strong>Close</strong></font>
</td>
</tr>
<tr>
<td class="bottom">
<img src='bigimage.jpg'></td>
</tr>
<tr>
<td Align="right" onClick="hideIt()" class="top">
<font Color="#ffffff"><Strong>Close</strong></font>
</td>
</tr>
</table>
</div>
</body></html>
Member Avatar for tonitone

Thanks very much for this - just back in the office after the weekend break so shall give it a try now.

Member Avatar for almostbob

Unexpected thought

the javascript can be rewritten
I think to work as as
showit(image)
instead of just
showit()
so that it loads the large image into the same div, overlaying the small image every time, exact code, unsure.
and the large images can be background loaded by script after the page is loaded so the large image appears immediately onclick, without affecting page load times

<!-- bla bla -->
</body>
<script type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "pic1.jpg";
image2 = new Image();
image2.src = "pic2.jpg";
//-->
//]]>
</script>
</html>
Member Avatar for tonitone

Thanks i'll give it a try.

This works great, however, i have about 5 different areas on the image that i need to map so that when they are clicked each one displays a different image. I can map the areas of the original image but can't get them to display a different image, they all display the same one.

Am determined to crack this though, surely i can't be the only person in the world to have ever wanted to do this?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.