HELP PLZ. content appear/disappear

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Nov 2009
Posts: 15
Reputation: dmmajorstudent is an unknown quantity at this point 
Solved Threads: 0
dmmajorstudent dmmajorstudent is offline Offline
Newbie Poster

HELP PLZ. content appear/disappear

 
0
  #1
Nov 5th, 2009
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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2009
Posts: 1,382
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 167
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso
 
0
  #2
Nov 5th, 2009
  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
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Join Date: Nov 2009
Posts: 15
Reputation: dmmajorstudent is an unknown quantity at this point 
Solved Threads: 0
dmmajorstudent dmmajorstudent is offline Offline
Newbie Poster
 
0
  #3
Nov 5th, 2009
Originally Posted by almostbob View Post
  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" />
Reply With Quote Quick reply to this message  
Join Date: Jan 2009
Posts: 1,382
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 167
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso
 
0
  #4
Nov 5th, 2009
thisimg is 80*80
thatimg is 640*500
theotherimg is 1024*768
yourimg is 216*136

You gave no details I made them up
  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.
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Join Date: Nov 2009
Posts: 15
Reputation: dmmajorstudent is an unknown quantity at this point 
Solved Threads: 0
dmmajorstudent dmmajorstudent is offline Offline
Newbie Poster
 
0
  #5
Nov 5th, 2009
Originally Posted by almostbob View Post
thisimg is 80*80
thatimg is 640*500
theotherimg is 1024*768
yourimg is 216*136

You gave no details I made them up
  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.
Reply With Quote Quick reply to this message  
Join Date: Jan 2009
Posts: 1,382
Reputation: almostbob has a spectacular aura about almostbob has a spectacular aura about almostbob has a spectacular aura about 
Solved Threads: 167
almostbob's Avatar
almostbob almostbob is offline Offline
Nearly a Posting Virtuoso
 
0
  #6
Nov 5th, 2009
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
  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
Failure is not an option It's included free, you don't have to do anything to get it
If at first you dont succeed, join the club
Of course its always in the last place you look, you dont keep looking after you find it

Please mark solved problems, solved
Reply With Quote Quick reply to this message  
Join Date: Nov 2009
Posts: 15
Reputation: dmmajorstudent is an unknown quantity at this point 
Solved Threads: 0
dmmajorstudent dmmajorstudent is offline Offline
Newbie Poster
 
0
  #7
Nov 5th, 2009
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

  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)
Reply With Quote Quick reply to this message  
Reply

Message:


Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC