Display photo placed in an array

Forum Moderators: open

Message Too Old, No Replies

Display photo placed in an array

How to display photo put in an array

Adam5000

8:27 pm on Jan 10, 2009 (gmt 0)

I've placed a photo in an array and I'm trying to create a function that will display it on the screen when a button is clicked on. But I can't seem to get it quite right.

Help!

<HTML>
<HEAD>
<TITLE>Show Photo</TITLE>

<SCRIPT type="text/javascript">
var photo=new Array("000.jpg");

function showPhoto()
{
var photo=document.getElementById('000.jpg');
photo.style.cssText="display:block;";
}
</SCRIPT>
</HEAD>

</HTML>

methode

9:36 pm on Jan 10, 2009 (gmt 0)

yay!

What you did above: created an array containing the "000.jpg" text, in the function you declared another variable, which should be any element from within the body which has the 000.jpg ID, and when this function is called, the above elements' read/write, display property should be block.

The problem is that you don't elements with 000.jpg ID and even if you'd have, they wouldn't do anything if you fire the function by click. Also, cssText should be applied only on texts as the name suggests. You know, cssText like css-TEXT. Accent on text.

Here's this. Try it, might work ;) :

<HTML>
<HEAD>
<TITLE>Show Photo</TITLE>

function showPhoto()
{
var photo=document.getElementById('thimage');
photo.style.display="block";
}
</SCRIPT>
</HEAD>

</HTML>

Replace the PUT_HERE_A_LINK_TO_AN_IMAGE to a fully qualified link like [searchengineworld.com...]

Sorry for the sarcasm from the beginning, it was a must :)

rocknbil

3:25 pm on Jan 11, 2009 (gmt 0)

Here you go. Put this in a directory above your images directory and rename "images\/" to whatever your images directory is. Repopulate captions and images array as required. (You could make better use of this by using an associative array instead of two arrays, but . . . popped off in 10 minutes . . . )


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
  <title>Slide Show</title> 
<script type="text/javascript"> 
 var images = new Array ('aerosmith.png','alanis.png','avril_lavigne.png'); 
 var captions = new Array ('Areosmith', 'Alanis M.', 'Avril Lavigne'); 
 var currMark = 0; 
function showImage() { 
  var container = document.getElementById('myContainer'); 
  container.style.display='block'; 
  document.getElementById('myImage').src='images\/'+images[currMark]; 
  document.getElementById('cssText').innerHTML=captions[currMark]; 
  document.getElementById('myButton').value=((currMark+1)>=images.length)?'First Image':'Next Image >>'; 
  currMark=((currMark+1)>=images.length)?0:currMark+1; 
 } 
</script> 
</head> 
<body> 
<form style="text-align:center;" action=""> 
  <div id="myContainer" style="display: none;"><img src="" id="myImage" alt=""></div> 
  <p id="cssText"></p> 
  <input type="button" id="myButton" onClick="showImage();" value="Show Image"> 
</form> 
</body> 
</html>

[edited by: rocknbil at 3:47 pm (utc) on Jan. 11, 2009]

methode

3:43 pm on Jan 11, 2009 (gmt 0)

Haha, oool. Never thought about creating slideshow this way. Cool :)

Adam5000

7:51 pm on Jan 11, 2009 (gmt 0)

method and rocknbil

That's teriffic. These ideas work great. You both certainly know your way around in Javascript.

Thanks for your help, and the javascript part of the page is done. All that's left now is to style it and make it look good.

rocknbil: I think Aerosmith is cool too.

Adam5000

7:52 pm on Jan 11, 2009 (gmt 0)

Oops. Excuse me. I meant methode.