By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
457,916 Members | 1,319 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 457,916 IT Pros & Developers. It's quick & easy.

get image filename fom div

P: n/a
I've have a number of DIV tags that contain one image. Each DIV has an
onclick event. How can I get the image filename? I just need the
filename and not the file path.

I was trying to do something with getElementsByTagName but I'm stuck
trying to work out which one has as its parent DIV the DIV that was clicked.

Andrew Poulos
Jul 23 '05 #1
Share this Question
Share on Google+
8 Replies


P: n/a
Andrew Poulos wrote on 10 jul 2005 in comp.lang.javascript:
I've have a number of DIV tags that contain one image. Each DIV has an
onclick event. How can I get the image filename? I just need the
filename and not the file path.


<div onclick='blah'><img src="a.jpg"></div>
<div>other things</div>
<div onclick='blah'>some text <img src="b.jpg"></div>
<div onclick='blah'><img src="c.jpg"></div>
<br><br>
<div id='r'></div>

<script type="text/javascript">

var r = document.getElementById('r');

var a = document.getElementsByTagName("div");
for (var i = 0; i < a.length; i++) {
var b = a[i].getElementsByTagName("img");
if(b.length>0)
r.innerHTML+= 'divnr ' + (i+1) + ": " +
b[0].src.replace(/.*\//,'')+'<br>';
}

</script>

--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Jul 23 '05 #2

P: n/a
Evertjan. wrote on 10 jul 2005 in comp.lang.javascript:
Andrew Poulos wrote on 10 jul 2005 in comp.lang.javascript:
I've have a number of DIV tags that contain one image. Each DIV has an
onclick event. How can I get the image filename? I just need the
filename and not the file path.


<div onclick='blah'><img src="a.jpg"></div>
<div>other things</div>
<div onclick='blah'>some text <img src="b.jpg"></div>
<div onclick='blah'><img src="c.jpg"></div>
<br><br>
<div id='r'></div>

<script type="text/javascript">

var r = document.getElementById('r');

var a = document.getElementsByTagName("div");
for (var i = 0; i < a.length; i++) {
var b = a[i].getElementsByTagName("img");
if(b.length>0)
r.innerHTML+= 'divnr ' + (i+1) + ": " +
b[0].src.replace(/.*\//,'')+'<br>';
}

</script>


reading your question again, perhaps this is what you want?

<div onclick='blah(this)'><img src="a.jpg"></div>
<div>other things</div>
<div onclick='blah(this)'>some text <img src="b.jpg"></div>
<div onclick='blah(this)'><img src="c.jpg"></div>
<script type="text/javascript">

function blah(x){
var b = x.getElementsByTagName("img");
if(b.length>0)
alert(b[0].src.replace(/.*\//,''))
}

</script>
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)

Jul 23 '05 #3

P: n/a
ASM
Andrew Poulos wrote:
I've have a number of DIV tags that contain one image. Each DIV has an
onclick event. How can I get the image filename? I just need the
filename and not the file path.


<script type="text/javascript">
<!--
function getImgFileName(thisDiv) {
var imgPath = thisDiv.getElementsByTagName('img')[0].src;
var imgFile = imgPath.substring(imgPath.lastIndexOf('/')+1,imgPath.length);
alert('img file = '+imgFile);
}
//-->
</script>
<p onclick="getImgFileName(this)"><img src='photo1.jpg'>photo 1</p>

<div onclick="getImgFileName(this)">
<h2>photo 2</h2>
<img src='TE_Prefs.jpg'>
<p>few words of description
</div>

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #4

P: n/a
Evertjan. wrote:
Evertjan. wrote on 10 jul 2005 in comp.lang.javascript:

Andrew Poulos wrote on 10 jul 2005 in comp.lang.javascript:

I've have a number of DIV tags that contain one image. Each DIV has an
onclick event. How can I get the image filename? I just need the
filename and not the file path.


<div onclick='blah'><img src="a.jpg"></div>
<div>other things</div>
<div onclick='blah'>some text <img src="b.jpg"></div>
<div onclick='blah'><img src="c.jpg"></div>
<br><br>
<div id='r'></div>

<script type="text/javascript">

var r = document.getElementById('r');

var a = document.getElementsByTagName("div");
for (var i = 0; i < a.length; i++) {
var b = a[i].getElementsByTagName("img");
if(b.length>0)
r.innerHTML+= 'divnr ' + (i+1) + ": " +
b[0].src.replace(/.*\//,'')+'<br>';
}

</script>


reading your question again, perhaps this is what you want?

<div onclick='blah(this)'><img src="a.jpg"></div>
<div>other things</div>
<div onclick='blah(this)'>some text <img src="b.jpg"></div>
<div onclick='blah(this)'><img src="c.jpg"></div>
<script type="text/javascript">

function blah(x){
var b = x.getElementsByTagName("img");
if(b.length>0)
alert(b[0].src.replace(/.*\//,''))
}

</script>


Thanks for the help (and to ASM as well). I never realised that you
could do getElement... with an object other than document. It's going to
change some of my other code for the better.

thanks again
Andrew Poulos
Jul 23 '05 #5

P: n/a
ASM
Andrew Poulos wrote:

Thanks for the help (and to ASM as well). I never realised that you
could do getElement... with an object other than document


you can have a look to that :
http://perso.wanadoo.fr/stephane.mor...OnClick_en.htm
that allow you to do not have hard html codding the 'onclick'

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #6

P: n/a
ASM wrote:
Andrew Poulos wrote:

Thanks for the help (and to ASM as well). I never realised that you
could do getElement... with an object other than document

you can have a look to that :
http://perso.wanadoo.fr/stephane.mor...OnClick_en.htm
that allow you to do not have hard html codding the 'onclick'


Hmm, that's pretty interesting stuff. Where do I find out more about
using the DOM?

Andrew Poulos
Jul 23 '05 #7

P: n/a
ASM
Andrew Poulos wrote:
ASM wrote:
http://perso.wanadoo.fr/stephane.mor...OnClick_en.htm
that allow you to do not have hard html codding the 'onclick'

Hmm, that's pretty interesting stuff. Where do I find out more about
using the DOM?


My refs are prerably in french ... but :

a good approach whith examples :
http://en.selfhtml.org/javascript/index.htm
curiously I'd gotten it in german ! ?

very serious :
http://www.mozilla.org/docs/dom/domr..._shortTOC.html

Try in google : cloneNode
or parentNode or appendChild

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #8

P: n/a
ASM
Andrew Poulos wrote:
ASM wrote:
you can have a look to that :
http://perso.wanadoo.fr/stephane.mor...OnClick_en.htm
that allow you to do not have hard html codding the 'onclick'

Hmm, that's pretty interesting stuff. Where do I find out more about
using the DOM?


in same idea (pages in fr):
http://perso.wanadoo.fr/stephane.mor...t_cells_fr.htm
http://perso.wanadoo.fr/stephane.mor...ht_rows_fr.htm

--
Stephane Moriaux et son [moins] vieux Mac
Jul 23 '05 #9

This discussion thread is closed

Replies have been disabled for this discussion.