i'm trying to create a code where every content image in my html that is click must display a <div id="credits"> whenever the image is clicked.
so the <div id="credits"> must display information in a format where it shows:
File Name - image_file_name.jpg
File Size - image_file_size (with units of the image itself)
after an image is clicked on it must disappear after 3 seconds
<img src='thisimg.jpg' width='80' height='80' alt='click for credits' onclick='document.getElementbyID("credits").innerhtml="File Name - thisimg.jpg<br>File Size - 80px*80px 15KB";setTimeout("document.getElementByID(\"credits\").innerhtml=\"\"",3000);>if populating images on the page from a database the scripting language can fill the blanks from the imagedetails stored
<img src='thisimg.jpg' width='80' height='80' alt='click for credits' onclick='document.getElementbyID("credits").innerhtml="File Name - thisimg.jpg<br>File Size - 80px*80px 15KB";setTimeout("document.getElementByID(\"credits\").innerhtml=\"\"",3000);>if populating images on the page from a database the scripting language can fill the blanks from the imagedetails stored
i'm a little confused. using the code you sent and using my paragraph id i know that the image size is 216 by 136 cause i fixed it in photoshop. do i put in the width='80' height='80' ?????
<p class="info_title"><img src="img/ford.jpg" alt="deuce" />
thisimg is 80*80
thatimg is 640*500
theotherimg is 1024*768
yourimg is 216*136
You gave no details I made them up
<img src='thisimg.jpg' width='80' height='80' alt='click for credits' onclick='document.getElementbyID("credits").innerhtml="File Name - thisimg.jpg<br>File Size - 80px*80px 15KB";setTimeout("document.getElementByID(\"credits\").innerhtml=\"\"",3000);'>Edit::left out closing quote
thisimg is 80*80
thatimg is 640*500
theotherimg is 1024*768
yourimg is 216*136You gave no details I made them up
<img src='thisimg.jpg' width='80' height='80' alt='click for credits' onclick='document.getElementbyID("credits").innerhtml="File Name - thisimg.jpg<br>File Size - 80px*80px 15KB";setTimeout("document.getElementByID(\"credits\").innerhtml=\"\"",3000);'>Edit::left out closing quote
ah sorry about that. I have different images on my webpage that i need to allow the user to click on the image and then show the file size and name with the time out...
is there another code i can use that is not innerhtml? teacher is strict on not to use it. and im not getting much help from him. i have already adjusted all jpg to 216 by 136. do i need to put in the exact size and file name for the image? or does the javascript find out what it is automatically?
also by using my html code how do i add in the code in the html to make the java part work?
<p class="info_title"><img src="img/zephyr1.jpg" alt="zephyr" />
write the descriptions into <divs> with different ID, not the same id visibility hidden
then for the onclick event change the visibility of the div to inline or block
<img src='thisimg.jpg' width='216' height='136' onclick='document.getElementbyid("thisdescr").style.visibility="inline";setwaittime("document.getElementbyid(\"thisdescr\").style.visibility=\"hidden\"",5000);'><div id='thisdescr' style='visibility:hidden;'>File Name - thisimg.jpg<br> File Size 15KB</div>unchecked code thought process
oh i see what you did. thanks again. hopefully these are my final questions. using that code you wrote. how do i use arrays and dom scripting with dom core methods and properties without using innerhtml?
do i wrote a function and then take that code you wrote into the html?
for instance one of the pictures on my page has a file size of43.3kb and the dimensions are 216x136
<img src='img/karma.jpg' alt='karma' width='216' height='136' onclick='document.getElementbyid("thisdescr").style.visibility="inline";setwaittime("document.getElementbyid(\"thisdescr\").style.visibility=\"hidden\"",3000);'><div id='thisdescr' style='visibility:hidden;'>File Name - karma.jpg<br> File Size 43.3KB</div>We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.