Forum Moderators: open
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.
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 elementalert ('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]