Forum Moderators: open

Message Too Old, No Replies

Recognizing the name of the pictures when onmouseover?

         

iridion_us

2:35 am on Oct 23, 2007 (gmt 0)

10+ Year Member



Hi

I want to know if how a javascript can recognize the name of a picture.
Let say i have two pictures.

Picture A. name is "bubble.jpg"
...then
Picture B. name is "duck.jpg"

When i hover the mouse using the onmouseover() function on one of the picture. The javascript should smart enough to recognize the name of the picture and display the name of that picture. Is this possible?

If so, please could you show me some sample codes for this please.

Thank you very much in advance.

lavazza

4:00 am on Oct 23, 2007 (gmt 0)

10+ Year Member



It can be done

Although the way I have done it below would be more than just a little annoying (implemented via an alert), hopefully it does show how JS can 'read' the alt, id and title attributes of an image

JAVASCRIPT

[pre]<script type="text/javascript">
function displayAnElementsAttributes (theElement)
{
var myID = theElement.id;
var myALT = theElement.alt;
var myTITLE = theElement.title;
var mySOURCE = theElement.src;
var myFilePath = theElement.src;
var myFileNameSplit = myFilePath.split("/");
var myFilenameAndExt = myFileNameSplit[myFileNameSplit.length-1]; // Last element
var myFilenameAndExtSplit = myFilenameAndExt.split(".");
var myFilename = myFilenameAndExtSplit[myFilenameAndExtSplit.length-2]; // 2nd to Last element

alert ('You are floating your mouse over an element with'
+ '\n\n id attribute: ' + myID
+ '\n\n alt tag: ' + myALT
+ '\n\n title tag: ' + myTITLE
+ '\n\n src is: ' + mySOURCE
+ '\n\n myFilenameAndExt is: ' + myFilenameAndExtSplit
+ '\n\n myFilename is: ' + myFilename);
}
</script>[/pre]

HTML

[pre]<p>
<img src="images/test001.png" id="01's id" onMouseOver="displayAnElementsAttributes(this);">
<img src="images/test002.png" alt="02's alt" onMouseOver="displayAnElementsAttributes(this);">
<img src="images/test003.png" title="03's title" onMouseOver="displayAnElementsAttributes(this);">
</p>[/pre]