PDA

Click to See Complete Forum and Search --> : Select image?!

JayDie
07-05-2004, 06:18 AM
Don't know where to put this post...

Hello all!

Imagine:

I've got a page with some images on it. The image tags are without id. I don't want to change the image tags.

What I want: I view the page in a browser. Is it possible, that when I click on a image, that I'll get a reference to it? You could do it with '<img onClick="javascript: alert(this.outerHTML)">' but as I said: I don't want to change the <img>. Could this be done? For example with use of the DOM or something?

Thanks a lot for all your answers!
ray326
07-05-2004, 04:00 PM
I think you could do that in SOME browsers using Javascript of which I'm ignorant. Ask in the Javascript forum and I'm sure some guru will fill you in.
Charles
07-05-2004, 04:22 PM
<img src="http://www.webdeveloper.com/forum/images/icons/icon5.gif" alt="?" onclick="alert(this.src)">
fredmv
07-05-2004, 04:42 PM
Charles' solution may be what you're looking for, but I interpreted your post somewhat differently. By "reference" do you mean the actual image node? If so:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript">
document.onclick = function()
{
var eventInstigator =
typeof arguments[0] != 'undefined' ?
arguments[0].target :
event.srcElement;

if(!/img/i.test(eventInstigator.nodeName)) return;

alert(
'nodeName: ' + eventInstigator.nodeName + '\nalt: ' +
eventInstigator.getAttribute('alt')
);
}
</script>
</head>
<body>
<img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" alt="img1">
<img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" alt="img2">
<img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" alt="img3">
</body>
</html>
JayDie
07-06-2004, 01:48 AM
Thanks a lot Fredmv!! That's what I wanted.
Charles didn't read my first post very well... I said: "I don't want to change the <img> tag."

I'll find out if this is really what I wanted! Thanks!
Charles
07-06-2004, 05:14 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<script type="text/javascript">
<!--
if (document.getElementById) onload = function () {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("img")[i]); i++) {
a.onclick = function () {alert(this.src)}
}
}
// -->
</script>
</head>
<body>
<img src="http://www.webdeveloper.com/forum/images/icons/icon5.gif" alt="?">
</body>
</html>
ray326
07-06-2004, 11:11 PM
I've got a ? for Fred and Charles. Why did you use the xxx=function() syntax rather than defining a (e.g.) getimginfo() function in the head?
fredmv
07-06-2004, 11:15 PM
Ray: no problem. It's because Jay specficially requested, and I quote: "I don't want to change the <img> tag", which implies that he wants to keep all event handlers and such in the JavaScript as opposed to within the markup.

Regardless, I usually prefer to to keep the JavaScript out of the markup anyhow. I also like to separate the functionality from the structure as well; just like CSS separates the presentaion from the structure.