944,191 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > HELP PLZ. content appear/disappear
Ad:
Permalink
Nov 5th, 2009
0

HELP PLZ. content appear/disappear

Expand Post »
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
Last edited by dmmajorstudent; Nov 5th, 2009 at 12:16 am.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dmmajorstudent is offline Offline
15 posts
since Nov 2009
Permalink
Nov 5th, 2009
0
Re: HELP PLZ. content appear/disappear
html Syntax (Toggle Plain Text)
  1. <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
Reputation Points: 562
Solved Threads: 369
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Nov 5th, 2009
0
Re: HELP PLZ. content appear/disappear
Click to Expand / Collapse  Quote originally posted by almostbob ...
html Syntax (Toggle Plain Text)
  1. <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" />
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dmmajorstudent is offline Offline
15 posts
since Nov 2009
Permalink
Nov 5th, 2009
0
Re: HELP PLZ. content appear/disappear
thisimg is 80*80
thatimg is 640*500
theotherimg is 1024*768
yourimg is 216*136

You gave no details I made them up
html Syntax (Toggle Plain Text)
  1. <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
Last edited by almostbob; Nov 5th, 2009 at 1:00 am.
Reputation Points: 562
Solved Threads: 369
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Nov 5th, 2009
0
Re: HELP PLZ. content appear/disappear
Click to Expand / Collapse  Quote originally posted by almostbob ...
thisimg is 80*80
thatimg is 640*500
theotherimg is 1024*768
yourimg is 216*136

You gave no details I made them up
html Syntax (Toggle Plain Text)
  1. <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" />
Last edited by dmmajorstudent; Nov 5th, 2009 at 2:22 am.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dmmajorstudent is offline Offline
15 posts
since Nov 2009
Permalink
Nov 5th, 2009
0
Re: HELP PLZ. content appear/disappear
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
html Syntax (Toggle Plain Text)
  1. <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
Reputation Points: 562
Solved Threads: 369
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Nov 5th, 2009
0
Re: HELP PLZ. content appear/disappear
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

html Syntax (Toggle Plain Text)
  1. <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>
Last edited by peter_budo; Nov 5th, 2009 at 7:14 pm. Reason: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Reputation Points: 10
Solved Threads: 0
Newbie Poster
dmmajorstudent is offline Offline
15 posts
since Nov 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Redirect to page??
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Javascript stop function problem





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC