title: Putting images as an Array to store data when they are clicked
body: <p>So I've been struggling with this and I'm no professional web designer. But basically I have 6 images of different types of weather, and when they are pressed/clicked, depending on which, I wanted what type of weather is was stored onto a table. So if you click the picture of the cloud, the word 'cloud' would be stored on my MYSQL database. After it was pressed, the user would end up eventually entering there name and a post about the weather, which they would be able to view on a final webpage. </p>
  
  <p>So my problem is I'm not totally sure how to make the images store that data. I also want the viewers to be able to view other posts of different weather stories, so I know I need to put the information into and array. I was thinking of using php in javascipt to save the information, but  I'm not totally sure how to come about it, Help?!</p>
  
  <pre><code> &lt;!DOCTYPE HTML&gt;
     &lt;html&gt;
     &lt;head&gt;
     &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
     &lt;title&gt;WhethertheWeather.&lt;/title&gt;
  
     &lt;!--&lt;link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" /&gt;--&gt;
          &lt;script src="http://www.adrianpelletier.com/mint/?js"    type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"&gt;   &lt;/script&gt;
          &lt;script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="demo/scripts/execute.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
  function cloudy()
  
  {
      return "&lt;?php
  
  
  $dbc=mysql_connect('asite.com','$user','$password','$db') ;
  
  mysql_select_db('$db',$dbc);
  
  
      echo $_POST[weather];?&gt;" 
  
  
  }
  
  
  &lt;/script&gt;
  
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body background="images/gradientsky.jpg"&gt; 
  
  &lt;div id="logo"&gt;
  
  WhethertheWeather.
  
  &lt;/div&gt;
  
  &lt;div id="question"&gt;
  
  Whats your favorite weather?
  
  &lt;/div&gt;
  
  &lt;div id="weather"&gt;
  
  &lt;ul id="nav-reflection"&gt;
  &lt;form name="myform" method="post" action="cloudy_name.php"&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="cloudy_name.php" id="weather[]" onclick="cloudy();" title="My fancy link"&gt;&lt;img src="images/cloudybubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="sunny_name.php" id="weather[]" onclick="sunny();" title="My fancy link"&gt;&lt;img src="images/sunnybubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-2"&gt;&lt;a href="snowy_name.php"  id="weather[]" onclick="snowy();" title="My fancy link"&gt;&lt;img src="images/snowbubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="rainy_name.php" id="weather[]" onclick="rainy();" title="My fancy link"&gt;&lt;img src="images/rainbubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="mixy_name.php" id="weather[]" onclick="mixy();" title="My fancy link"&gt;&lt;img src="images/mixbubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="windy_name.php" id="weather[]" onclick="windy();" title="My fancy link"&gt;&lt;img src="images/windybubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;input type="hidden" name="weather" value="weather" id="weather"&gt;
  &lt;/form&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the code I'm working with now. </p>
  
  <p>Here is the index page, I changed the name to weather so it wouldn't get confused with another name variable I have.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;WhethertheWeather.&lt;/title&gt;
  
  &lt;!--&lt;link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" /&gt;--&gt;
          &lt;script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="demo/scripts/execute.js"&gt;&lt;/script&gt;
  
  
  &lt;script&gt;
      function showweather(weather) {
      window.location = 'cloudy_name.php?w=' + weather;
  }
  
  &lt;/script&gt;
  
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body background="images/gradientsky.jpg"&gt; 
  
  &lt;div id="logo"&gt;
  
  WhethertheWeather.
  
  &lt;/div&gt;
  
  &lt;div id="question"&gt;
  
  Whats your favorite weather?
  
  &lt;/div&gt;
  
  &lt;div id="weather"&gt;
  
  &lt;ul id="nav-reflection"&gt;
  &lt;form method="post" action="cloudy_name.php"&gt;
          &lt;li class="button-color-1"&gt;&lt;a href="cloudy_name.php" id="weather[]" onclick="showweather('cloudy');" title="My fancy link"&gt;&lt;img src="images/cloudybubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="sunny_name.php" title="My fancy link"&gt;&lt;img src="images/sunnybubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-2"&gt;&lt;a href="snowy_name.php" title="My fancy link"&gt;&lt;img src="images/snowbubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="snowy_name.php" title="My fancy link"&gt;&lt;img src="images/rainbubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="mixy_name.php" title="My fancy link"&gt;&lt;img src="images/mixbubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="button-color-1"&gt;&lt;a href="windy_name.php" title="My fancy link"&gt;&lt;img src="images/windybubble.png" width="211" height="180" align="left"&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;input type="hidden" name="weather" value="none" id="myweather"&gt;
  &lt;/form&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the <code>cloudy_name.php</code> page where u input the name.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;WhethertheWeather&lt;/title&gt;
  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body background="images/cloudysky.jpg"&gt; 
  
  &lt;div id="name"&gt;
  First of all, what is your name?
  &lt;/div&gt;
  
      &lt;form method="post" action="cloudy_story.php?w=&lt;?php echo htmlspecialchars($_GET['weather'])?&gt;"&gt;
              &lt;table width="20%" border="1" align="center" cellpadding="1" cellspacing="1"&gt;
  
                  &lt;td width="100%"&gt;&lt;label&gt;Name: &lt;input type="text"  name="name" value="&lt;?php echo $_POST[name]; ?&gt;"&gt;&lt;/input&gt;&lt;/label&gt;
  
                      &lt;input type="submit" value="Submit"&gt; 
  
  
              &lt;/table&gt;
          &lt;/form&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the cloudy_story.php.</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Forum&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
      &lt;/head&gt;
      &lt;body background="images/cloudysky.jpg"&gt; 
  
     &lt;div id="cloudy"&gt;
      Cloudy
      &lt;/div&gt;
      &lt;div id="white"&gt;
        &lt;div id="blue"&gt;
          &lt;div id="grey"&gt;
            &lt;div id="container"&gt;
              &lt;form method="post" action="cloudy_update.php?w=&lt;?php echo htmlspecialchars($_GET['weather']); echo htmlspecialchars($_POST['name'])?&gt;"&gt;
                &lt;table width="800px" border="1" align="center" cellpadding="3" cellspacing="1"&gt;
                  &lt;tr&gt;
                    &lt;td width="800px"&gt;&lt;h5&gt;&lt;?php echo 'Hi, '. $_POST[name] ?&gt;!
                    Write your story about your favorite weather. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam urna, rutrum ut hendrerit sit amet, dictum ut dui. Cras id sem at tortor ornare porttitor at id dolor. Proin quis nulla sit amet felis tempus imperdiet eu id felis. Vivamus ac ultricies ipsum. Aliquam nec enim nec turpis mattis aliquam. Aliquam eu quam libero. Quisque vel ligula ante, ut tempor sapien. Nullam molestie elementum urna et consequat. Fusce turpis dolor, consectetur vel placerat vel, tempor vel justo. Donec odio orci, imperdiet quis varius dignissim, pulvinar id erat. Proin lectus enim, ornare tincidunt facilisis et, accumsan eget purus. Phasellus dolor mi, . &lt;/h5&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td width="300px"&gt;&lt;label&gt;Story :
                      &lt;textarea rows="10" cols="100"  name="story" &gt;&lt;?php echo $_POST[story]; ?&gt;&lt;/textarea&gt;
                      &lt;/label&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                    &lt;td width="300px"&gt;&lt;input type="submit" value="Post"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                &lt;/table&gt;
                &lt;input type="hidden" name="name" value="&lt;?php echo $_POST[name]?&gt;"&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the page that updates all of it (cloudy_update.php) and puts it on the table in m database.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;?php
  
  $dbc=mysql_connect('localsite','user','pw','db') ;
  mysql_select_db('db',$dbc);
  
      /////////////////////////////////////////////////
      //let's insert our data into the database      //
      /////////////////////////////////////////////////
  
  
  $query = "insert into stories values('" . mysql_real_escape_string($_GET['weather']) . "', '" . mysql_real_escape_string($_POST['name']) . "' , '" . mysql_real_escape_string($_POST['story']) . "')"
  
      or die ("Error - Couldn't register user.");
  
      echo "Thank you $_POST[name]! You've been successfully posted&lt;br /&gt;&lt;br /&gt;
          Please view all the posts &lt;a href='view_forum.php'&gt;&lt;b&gt;here&lt;/b&gt;&lt;/a&gt;.";
  
  
      /////////////////////////////////////////////////
      // finished inserting our data into the database //
      /////////////////////////////////////////////////
  
  
       exit();
   ?&gt;
  </code></pre>
  
  <p>Sorry...I'm just really struggling with this...probably something small that I'm too stupid to see..</p>