PDA

View Full Version : Get all images on a web page+place overlay?

2eXtreme
05-13-2008, 01:01 AM
Hey Guys

This is my first post here, so forgive me if it's not up to regular posting standards!

In my current situation, I have a web page gallery, with about 100 images. The 100 images are on display all at once. None of the images have id tags, a typical img tag is simply as follows:

<img src="testpicname.jpg">

That's as detailed as the tags get!

So I want my users to be able to roll over an image, and when they do, I want my logo to appear as a 20 x 20 overlay in the centre of the picture, which can then be clicked by users and this will then display information about the picture.

So I'm guessing what I need to have is:

A way to identify any image on the page and assign an event handler to it so that an overlay is displayed when the user rolls over an image
An overlay image with an event handler assigned to it so that an alert box will appear when the overlay is clicked

Can anyone tell me if this is possible at all? And if it isn't too much bother, could they give me some help/links on how to go about doing it?

Thanks very much for any help!

:D
rangana
05-13-2008, 02:09 AM
I'm uncertain what you mean by overlay, but then, it's possible to control images even when there is no id.

Here's a basic example to keep you going ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#wrap{width:620px;padding:3px;border:3px double #222;margin:20px auto;text-align:center;}
img{width:200px;height:150px;border:1px solid #9c0;}
</style>
<script type="text/javascript">
window.onload=function()
{
var imgs=document.getElementById('wrap').getElementsByTagName('img');
imgs[0].onmouseover=function(){alert('You hovered 1st image');}
imgs[1].onmouseover=function(){alert('You hovered 2nd image');}
imgs[2].onmouseover=function(){alert('You hovered 3rd image');}
imgs[3].onmouseover=function(){alert('You hovered 4th image');}
imgs[4].onmouseover=function(){alert('You hovered 5th image');}
imgs[5].onmouseover=function(){alert('You hovered 6th image');}
imgs[6].onmouseover=function(){alert('You hovered 7th image');}
imgs[7].onmouseover=function(){alert('You hovered 8th image');}
imgs[8].onmouseover=function(){alert('You hovered 9th image');}
}
</script>
</head>
<body>
<div id="wrap">
<img src="http://h1.ripway.com/rangana/images/Picture1.png">
<img src="http://h1.ripway.com/rangana/images/Picture2.jpg ">
<img src="http://h1.ripway.com/rangana/images/Picture3.jpg ">
<img src="http://h1.ripway.com/rangana/images/Picture4.jpg ">
<img src="http://h1.ripway.com/rangana/images/Picture5.jpg ">
<img src="http://h1.ripway.com/rangana/images/Picture6.jpg ">
<img src="http://h1.ripway.com/rangana/images/Picture7.jpg ">
<img src="http://h1.ripway.com/rangana/images/Picture8.jpg ">
<img src="http://h1.ripway.com/rangana/images/Picture9.jpg ">
</div>
</body>
</html>
2eXtreme
05-13-2008, 10:07 AM
Thanks very much for your reply mate!

When I say I want an overlay, basically, going off your example code, lets say instead of having an alert appear when I roll over an image, I want a small 20x20 image to appear at the corner of the image I roll over. Maybe overlay is the wrong term to use, but basically I want the small image to appear on top of the big images when I roll over them. Then, I want the small image to be a button that can be clicked, and this then displays the alert.

Does this make sense?

Again, thanks very much for your help!