JavaScript - Trying To Display Image Using Array Value

I have this simple php array. The array will dynamically pull results from the db in the future.

PHP Code:
<?php

$dataArray = array 
        ( 
            'id1'  => array 
                    
                    (     'icon' => '<img src="images/piicon.png">',
                        'app' => 'GGP',
                        'timestamp' => date('m/d/y'),
                        'location' => 'Bellevue',
                        'comments' => 'It works!',
                            ),
            'id2'  => array 
                    
                    (   'icon' => '<img src="images/piicon.png">',
                        'app' => 'Meijer',
                        'timestamp' => date('m/d/y'),
                        'location' => 'San diego',
                        'comments' => 'It works!',
                            ),
            'id3'  => array 
                    
                    (   'icon' => '<img src="images/piicon.png">',
                        'app' => 'Point Inside',
                        'timestamp' => date('m/d/y'),
                        'location' => 'Boston',
                        'comments' => 'I guess its working?  Maybe not exactly what we want yet though?!',
                            )
        );
             
echo json_encode($dataArray);    

?>

Currently if I have 100 results in my array, 100 results will be added to the table, 75 = 75 rows etc. What I am trying to plan out is a logical way to display one result from the array at a time. I am not looking for a chunk of jquery as an answer, better yet would be a plan/idea a programmer would you use to solve this.

PHP Code:
$(document).ready(function() {
    setInterval(function() {
        // get data
        $.ajax({
            url: '/ajax/data.php',
            type: "GET",
            cache: false,
            error: function(data) {
                $("div#error").html('error: '+data);
            },
            success: function(data) {
                var jsonObj = jQuery.parseJSON(data);
                jQuery.each(jsonObj, function(index, value) {
                    var newRow = $("<tr><td>"+value.icon+"</td><td>"+value.app+"</td><td>"+value.timestamp+"</td><td>"+value.location+"</td><td>"+value.comments+"</td></tr>");
                    $("#mainTable tbody").prepend(newRow);
                });
            }    
        });
    }, 5000);
}); 


thanks

I want to create an array for a religious website that will display a different Bible verse for each day of the year.

This is how I incremented each day of the year.

Code:

var myDate=new Date();
myDate.setFullYear(2011,2,4);

myDate.setDate(myDate.getDate()+1);

How do I make the connection between the array and the new date as it changes?

This is a snippet from the array.

Code:

var dailyVerseRef=new Array();

dailyVerseRef[0]="Genesis 1:1";
dailyVerseRef[2]="Genesis 1:2";
dailyVerseRef[3]="Genesis 1:3";
dailyVerseRef[4]="Genesis 1:4";
dailyVerseRef[5]="Genesis 1:5";
dailyVerseRef[6]="Genesis 1:6";
dailyVerseRef[7]="Genesis 1:7";
dailyVerseRef[8]="Genesis 1:8";

I used a switch to go through the days of the week, but to go through the days of the year seems more difficult.

I have an essoteric question about javascript and how DOM/javascript stores divs that are created and displayed in succession by absolute positioning.

I have a series of divs that are assigned absolute top and left values to
form a grid. The grid tiles are programmed to swap coordinates in pairs
when one of the pairs is clicked.
Then if I do a sampling of the divs by:
Code:

//returns the same string on every call.
//regardless of the coordinate values. which change
var GM = document.getElementById('TP');
if(GM.hasChildNodes)
  {
   var GMC = GM.getElementsByTagName('div');
   var str = '';
   for(i = 0; i < GMC.length; i++)
      {
       if(GMC[i].hasChildNodes)
         {
          for(var j = 0; j < GMC[i].childNodes.length; j++)
             {
              var gmc = GMC[i].childNodes[j];
              var gmcTxt = gmc.childNodes[0].data;
              str += gmcTxt;
             }
         }
      }
  }
alert(str);

The list does not represent the positions of the divs as they
appear in the browser, but in a sequence that is saved in another
array when the divs are created.

The same is true for document.getElementById('[id assigned each div]')
The only way to detect the sequence is to do a long drawn out loop looking
for coordinate values, and comparing them to a prestablish template set
of values, then looping back through to compare the contents of each div
and decide if they are in the right place (visually).

The problem is that some divs may have the same content.
If the same content appears to be in the right place, the coordinates can
be wrong. So I need to detect the content and decide if it is right, regard-
less of the coordinates. This has to be done by the program (of course).

So the question is: What is javascript doing when it is asked to
Code:

document.getElementByTagName('[elem]');

In this case are the divs children of the document?
(in the case of my project, children of a container div)
And why would they not be detected in the order apparent in the browser
window?

I will post the current version and return and post a reply with the
url. http://www.jekillen.com/jekillen/con..._wise_dev.html

hi,

i am currently doing a program that will display the image continuously. the image name will be like pic1.jpg , pic2.jpg , pig3.jpg untill pic10.jpg

this is my code so far :

<html>
<head>
<script type="text/JavaScript">
var fileName;

function display()
{
fileName = new Array();
for( i=0; i<5; i++)
{
fileName[i] = new Image();
fileName[i].src = "screenshot_" + i + ".jpeg";
}
}
display();

</script>
</head>
<body>
</body>
</html>


but when i run it, it give me infinity loop, can anyone tell me what is the problem of that ? thanks in advance for the reply

Hello,

First, I'm new to the Javascript (and to this forum).

I am trying to use a Javascript to display a randomly selected image located in a folder of my site. I need to fit these images (which may have quite diverse dimensions) into a frame of 280x280 px.

Here is the code of the current script which does not currently work:
Code:

// JavaScript Document
<script language="JavaScript"><!--


function random_imglink(){
  var myimages=new Array()
  var imagetitle=new Array()
urlimage="http://www.mysite.fr/Images/RandomPictures/"


var i=0
//specify here the total number of random images which should be names 1.jpg, 2.jpg etc
nbrandompic=140
for (i=0;i<= nbrandompic;i++)
   {
  myimages[i]=urlimage + i +".jpg"
  imagetitle[i]=urlimage + i +".txt"
   }

  
//Randomly select an image

  var ry=Math.floor(Math.random()*myimages.length)

  if (ry==0)
     ry=1
  var reduction = 1
  var maxWidth=280
  var maxHeight=280

//Calculate the reduction that should be applied


         if(myimages[ry].width > maxWidth || image.height > maxHeight)
            reduction = Math.max(myimages[ry].width/maxWidth,myimages[ry].height/maxHeight)
 
 // New dimensions     
      iw = Math.round(myimages[ry].width / reduction)
      ih = Math.round(myimages[ry].height / reduction)
	 

//Display image	 
	 
    document.write('<a><img src="'myimages[ry]'" title="" border=0 width='+iw+' height='+ih+'></a>')
	

}

  random_imglink()
 

//-->
</script>

I am sure that you guys can help me solve this problem. Many thanks in advance!!

Antonino

Hi people,

I'm building an online psychological experiment in which I need to display an image for 5 seconds on the screen.

Does anyone has a simple script for that?

I found some script that does image rotation but its not exactly what I am looking for. First, the rotation of the images doesn't stop and second I don't need something so elaborate.

This is the script that I found.

Code:

<SCRIPT LANGUAGE="JavaScript">
<!--
var dimages=new Array();
var numImages=2;
for (i=0; i<numImages; i++)
{
  dimages[i]=new Image();
  dimages[i].src="images/image"+(i+1)+".jpg";
}
var curImage=-1;
function swapPicture()
{
  if (document.images)
  {
    var nextImage=curImage+1;
    if (nextImage>=numImages)
      nextImage=0;
    if (dimages[nextImage] && dimages[nextImage].complete)
    {
      var rel="nofollow" target=0;
      if (document.images.myImage)
        rel="nofollow" target=document.images.myImage;
      if (document.all && document.getElementById("myImage"))
        rel="nofollow" target=document.getElementById("myImage");
  
      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }
      setTimeout("swapPicture()", 5000);
    }
    else
    {
      setTimeout("swapPicture()", 500);
    }
  }
}
setTimeout("swapPicture()", 5000);
//-->
</SCRIPT>

Thanks

How do I get a function in the head to turn on or show an image in the body area?

I am a struggling noob, but tutorials will not teach me. If I wanted to document.write, or in this case use an alert box, I would not have a question.

I feel I understand the functions below, but these are not real world examples of anything, at least that I would ever use.

I don't know how to help myself. But I do know, I need to get the part of alert("Hello") changed into something somehow the image will act on, see and display after the 3 second delay.

This is the website I got this code from.
http://www.w3schools.com/js/js_timing.asp

If I can see how to get a function to really do something, would be a big help for me in understanding JS.

This is not a school project, my school doesn't offer any programming.
I have been at this all day trying to find a tutorial that would help me.

Thanks so much for your help.
Code:

<html>
<head>
<script type="text/javascript">

function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
alert("Hello"); Somehow this has to show my image.
}

</script>
</head>

<body">

<form>
<input type="button"
       value="show my Image"
       onClick="timeMsg()" />
</form>

<img />
</body>

</html>

Hi guys I'm really stumped on this, and I haven't been able to find a tutorial online anywhere.

I'm trying to create an XML news feed for a company's website I am currently building. I have created the XML, and gotten the text to display perfectly in the HTML by using javascript.

Now I want to add a thumbnail image for each news story, to make updating simpler, I wanted the url for the thumbnail to be entered into the XML, from which the javascript could read and then display in the corresponding area in the HTML.

Is this even possible? Every tutorial I get when I use the terms "Image" and "Javascript" gives me a tutorial for a gallery or a slideshow which is not what I want at all.

Below is the javascript code, followed by the XML code;

Code:

<script type="text/javascript">

var xmlDoc;
<!--
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  } 
else // Internet Explorer 5/6
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

var x=xmlDoc.getElementsByTagName("NEWS");
i=0;

function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}

//-->
</script>

XML code
Code:

<?xml version="1.0" encoding="ISO-8859-1"?>

<BULLETIN>
<NEWS>
<PIC>"/newssmall.jpg"</PIC>
<DATE>14/3/2010</DATE>
<TITLE>News Story 1</TITLE>
<STITLE>This is a short sentence to describe the story in brief</STITLE>
<STORY>This is the text of the news story</STORY>
</NEWS>
</BULLETIN>

Thanks to anyone that even reads this, I'm probably making a nooby mistake, I only started using JS and XML on Monday so I'm still learning lol

I have an image map with 6 areas.

Code:

			<p class="center"><img src="images/car_feature.png" alt="" usemap="#car"/></p>

			<map id="car" name="car">
			<area shape="rect" coords="172,198,195,222" href="#" alt=""/>
			<area shape="rect" coords="242,79,266,104" href="#" alt=""/>
			<area shape="rect" coords="293,124,317,149" href="#" alt=""/>
			<area shape="rect" coords="407,212,431,227" href="#" alt=""/>
			<area shape="rect" coords="430,300,453,325" href="#" alt=""/>
			<area shape="rect" coords="565,346,588,370" href="#" alt=""/>
			</map>

I also have 6 DIVs that are hidden and only a single one will appear visible on mouseover of its corresponding image map area.

Code:

			<div id="hidden">
				<div class="feature">
					Feature 1
				</div>

				<div class="feature">
					Feature 2
				</div>

				<div class="feature">
					Feature 3
				</div>

				<div class="feature">
					Feature 4
				</div>

				<div class="feature">
					Feature 5
				</div>

				<div class="feature">
					Feature 6
				</div>
			</div>

The roadblock I'm running into is the show function in the JavaScript.

Code:

			window.onload = init;

			function init() {
				var area = document.getElementById("car").getElementsByTagName("area");
				var features = document.getElementById("hidden").getElementsByTagName("div");

				hide();

				function show() {
					for(a=0; a < area.length; a++) {
						if(area[a].onmouseover) {
							document.getElementById("hidden").getElementsByTagName("div")[a].style.display="block";
							}
						}
					}

				function hide() {
					for(b=0; b < features.length; b++) {
						document.getElementById("hidden").getElementsByTagName("div")[b].style.display="none";
						}
					}

				for(i=0; i < area.length; i++) {
					area[i].onmouseover = show;
					area[i].onmouseout = hide;
					}
				}

I'm trying to get it so that if I hover over the first area on the image map, the first hidden DIV will appear, but none of the others. And if I hover over the fourth area, the fourth DIV will appear.

I hope this makes sense, and I'd appreciate any and all help towards solving this issue and ending my headache lol

Hi,
I have a table with 2 colums, the left column is to preview image and the right column is for 4 small thumbnails. Iwant the preview picture to change when clicked on the individual thumbnail.
Can someone please help me on this?
Code:

<table width="816" height="303" border="1">
  <tr>
    <td width="396" height="297">&nbsp;</td>
    <td width="404" valign="top"><table width="100%" border="1">
      <tr>
        <td width="52%" height="166"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200"/> </td>
        <td width="48%"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
      <tr>
        <td height="174"><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
        <td><img src="../Avizhome/images/calendar1.jpg" width="200" height="200" /></td>
      </tr>
    </table></td>
  </tr>
</table>

Hello everyone. I am trying to put together a browser based game which uses javascript and cookies, and am looking for help with one of it's functions.

I need a script which checks a cookie value, then displays a certain image, depending on what that value is. So, if the value is 50, it displays one, if it's 60 it display another one etc.

What script would I use?

Filename: front.htm
Supporting files: ads1.jpg - ads5.jpg, ads.js, fp.jpg, front.htm, logo.jpg, random.js,
styles.css
-->
<title>The Ridgewood Herald Tribune</title>
<link href="styles.css" rel="stylesheet" type="text/css" />

<script src="random.js" type="text/javascript"></script>

<script src="ads.js" type="text/javascript"></script>
</head>

<body>

<div id="links">
<h1>Contents</h1>
<p class="section">Main</p>
<p class="linksub">
<a href="#">Home</a><br />
<a href="#">Subscriptions</a><br />
<a href="#">Contact Us</a><br />
<a href="#">News Sources</a><br /><br />
</p>
<p class="section">News</p>
<p class="linksub">
<a href="#">Local</a><br />
<a href="#">National</a><br />
<a href="#">International</a><br />
</p>

<p class="section">Sports</p>
<p class="linksub">
<a href="#">Baseball</a><br />
<a href="#">Basketball</a><br />
<a href="#">Football</a><br />
<a href="#">Golf</a><br />
<a href="#">Hockey</a><br />
<a href="#">Miscellaneous</a><br />
</p>

<p class="section">Opinion</p>
<p class="linksub">
<a href="#">Editorials</a><br />
<a href="#">Columnists</a><br />
<a href="#">Letters</a><br />
</p>

<p class="section">Classifieds</p>
<p class="linksub">
<a href="#">Employment</a><br />
<a href="#">For Sale</a><br />
<a href="#">Personals</a><br />
<a href="#">Real Estate</a><br />
<a href="#">Wanted</a><br />
</p>

<p class="section">Other</p>
<p class="linksub">
<a href="#">Business</a><br />
<a href="#">Weather</a><br />
<a href="#">Entertainment</a>
</p>
</div>

<div id="main">
<div id="ads">
<script type="text/javascript">
/*
generate a random integer from 1 to 5
*/
var rNumber = randInt(5);

/*
description of the random ad
*/
var rAd = adDescription(rNumber);

/*
URL of the random ad
*/
var rLink = adLink(rNumber);

document.write('<a href="'+rLink+'">');
document.write(rLink+"'ads'"+rNumber+"'.jpg'" alt="'rAd'" />);
document.write(adLink);
document.write("</a>");
</script>

</div>

<div id="request"><a href="#">Contact us today to place your ad</a></div>

<p id="logo">
<img src="logo.jpg" alt="Ridgewood Herald Tribune" />
</p>

<p id="fp">
<img src="fp.jpg" alt="" />
</p>

<h2>Park Opens</h2>
<p id="intro">The <i>Adventure Island</i> theme park opened its doors on
Monday near Ridgewood. The park, one of the biggest in New Jersey, drew
large crowds, but the long lines didn't deter anyone. "I've been watching
them put up the rides over the last year, it's really exciting to finally
get inside the gates!" said Ridgewood resident, Denise Brooks.</p>

<p class="cont"><a href="#">story continues on page 2...</a></p>

<address id="footer">
<b>Ridgewood Herald Tribune</b> &nbsp;°&nbsp; 10010 Atwood Ave.
&nbsp;°&nbsp; Ridgewood, NJ &nbsp; &nbsp; 07451<br />
Phone: (201)555-1101 &nbsp;°&nbsp; Fax: (201)555-1102
</address>
</div>

</body>
</html>

So I've got my code ready to generate a random number between a certain range and printing it out in text. What I'm trying to accomplish with this code is to print the actual image as well as the text.

I'm aware that there is an error in my document.write line, and that it's not the best solution. I was hoping for some suggestions to change/improve this last bit. Thanks in advance!

Code:

<html>
<title>RANDOM IMAGE TO NUMBER RANGE</title>
<body>
<center>
<script language="javascript" type="text/javascript">
var ranges = [
    { from: 11, image: "image4.jpg" },
    { from: 1, image: "image3.jpg" },
    { from: -9, image: "image2.jpg" },
    { from: -20, image: "image1.jpg" }      
];

var random_num = (Math.round((Math.random()*41)+-20));
var image = "default";

for(var i = 0; i < ranges.length; ++i) {
    if(random_num >= ranges[i].from) {
        image = ranges[i].image;
        break;
    }
}
{
document.write("Text: " + random_num + " Text, " + " Image: = " + image);
{
document.write('<img src="images/' + ranges[i].image);
}
}
</script>
<br></br>
<div>
CLICK <a href="javascript:history.go(0);">REFRESH or F5</a> FOR A RANDOM IMAGE on NUMBER-RANGE.
</div>
</center>
</body>
</html>

Hey all,

I am trying to get a code instead of php to display a image from a questionaire results page;

Say the url returns;
http://localhost/Myoka2/myokaTestResults.php?img=7

the 7 will show score2.png... this works fine with php, here is the code

<?php
$total = $_GET['img'];
if ($total < 7)
$total = 1;
elseif ($total < 13)
$total = 2;
elseif ($total < 18)
$total = 3;
elseif ($total < 20)
$total = 4;
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contact Form</title>
<script src="rollover.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://dl.dropbox.com/u/25307673/myoka/myokaStyle.css" type="text/css" media="screen" />
</head>

<body>
<span style="color:#6A1E67;font: normal bold 12pt/14pt Arial, Helvetica, sans-serif;margin-left:140px;">
How stressed are you?
<h3>SCORES</h3>
</span>

<img src="http://dl.dropbox.com/u/25307673/myoka/myokaStress/score<?php echo $total; ?>.png" alt="" /><br />

<a href="http://www.facebook.com/myoka.spas?sk=app_128953167177144" target="_blank">
<img src="http://dl.dropbox.com/u/25307673/myoka/myokaFanPage//lastMin.jpg" style="padding-left:0px; padding-top:5px; border:0px" alt="" />
</a>
<br/>
</body>
</html>


What i need is this in javascript so that it will work in a iframe :-)

from my spry sub.menu tab,
i'm trying to use "onclick" to post a new img in a specific div elsewhere on the page.

<li><a class="MenuBarItemSubmenu" href="#">CPQC</a>
<ul>
<li><a href="#" onclick="document.getElementById('cpqcRange').src='images/cpqc/cpqcHot.png';">Hot</a></li>
</ul>
</li>

<div id="cpqcRange">
<p>
<img src="cpqcLocation.png" alt="cpqcLocation" name="cpqcLocation" width="504" height="360" id="cpqcLocation" />
</p>
</div>

i think i'm close, but something is wrong.
can you just call up the div "cpqcRange" by name and slap a new img.src in there???????

cheers,
Paul

today's weather in Kalispell, MT, USA
cold, brrrrr, not much snow, but it's coming soon
it was about 18degF this morning