get image filename fom div

[Andrew Poulos]

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

 

[Evertjan.]

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.getElementsByTagName("img");
if(b.length>0)
r.innerHTML+= 'divnr ' + (i+1) + ": " +
b[0].src.replace(/.*\//,'')+'<br>';
}

</script>

 

[Evertjan.]

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.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>

 

[ASM]

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>

 

[Andrew Poulos]

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.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

 

[ASM]

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.moriaux/truc/setOnClick_en.htm
that allow you to do not have hard html codding the 'onclick'

 

[Andrew Poulos]

you can have a look to that :
http://perso.wanadoo.fr/stephane.moriaux/truc/setOnClick_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

 

[ASM]

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/domref/dom_shortTOC.html

Try in google : cloneNode
or parentNode or appendChild

 

[ASM]

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.moriaux/truc/tables_highlight_cells_fr.htm
http://perso.wanadoo.fr/stephane.moriaux/truc/tables_highlight_rows_fr.htm