|
JavaScript - Check Cookie Value Then Display Image
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? Similar TutorialsHello, through a javascript injection im trying to find out if a cookie exists on my computer. Here's the code I inject: Code: javascript: if (document.cookie.indexOf('_idp_session') != -1) alert('cookie is here'); else alert('cookie is not here');
and when visiting the options of my browser, I can locate the cookie, and i can see its there. Nevertheless my script keeps telling me its not there.. what am i doing wrong? Is there any way to check if exists a cookie from a domain2 in domain1? The purpose here is if the cookie from domain 2 exists then do an action in domain 1. For example: Erase cookie or do an action. Hello, i wrote this code to open a page if doesn't exist a cookie but it doesn't open the page do you know where I wrong? Thank you ! Code: <!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">
<head>
<title> HTML </title>
</head>
<body>
<script type="text/javascript">
function CookieLeggi(CookieNome)
{
if (CookieNome.length==0) return null;
var PosizioneIniziale = document.cookie.indexOf(CookieNome+"=");
if (PosizioneIniziale == -1) return null;
PosizioneIniziale += CookieNome.length+1;
var PosizioneFinale = document.cookie.indexOf(";",PosizioneIniziale);
if (PosizioneFinale == -1) PosizioneFinale = document.cookie.length;
return unescape(document.cookie.substring(PosizioneIniziale,PosizioneFinale));
}
function CookieScrivi(name,value,expiresUdM,expires,path,domain,secure)
{
if (!name || !value) { return false }
if ((expiresUdM && expires) && (expiresUdM!='GMT')) {
var ExpiresMillisec = ExpiresDate = Oggi = new Date();
switch (expiresUdM) { // calcola i JS-millisecondi del momento di scadenza
case "anni": ExpiresMillisec=Oggi.getTime()+expires*365*24*60*60*1000; break;
case "mesi": ExpiresMillisec=Oggi.getTime()+expires*31*24*60*60*1000; break;
case "giorni": ExpiresMillisec=Oggi.getTime()+expires*24*60*60*1000; break;
case "ore": ExpiresMillisec=Oggi.getTime()+expires*60*60*1000; break;
case "minuti": ExpiresMillisec=Oggi.getTime()+expires*60*1000; break;
case "secondi": ExpiresMillisec=Oggi.getTime()+expires*1000; break;
default: ExpiresMillisec=Oggi.getTime()+expires;
}
ExpiresDate.setTime(ExpiresMillisec);
expires = ExpiresDate.toGMTString(); }
secure = (secure=="1" || secure==1 || secure=="secure") ? 1 : "";
document.cookie = name + "=" +escape(value) +
( (expiresUdM && expires) ? "; expires=" + expires : "") +
( (path) ? "; path=" + path : "") +
( (domain) ? "; domain=" + domain : "") +
( (secure) ? "; secure" : "");
if (CookieLeggi(name)==null && secure!=1) { return false; } else { return true; }
}
</script>
<script type="text/javascript">
if (CookieLeggi(liveads) == "null")
{
window.open("http://www.google.com", "Google");
CookieScrivi(liveads, adsm, ore, 12, /, .localhost, 1);
}
else
{
break;
}
</script>
</body>
</html>
Hey guys, I think this is some pretty basic JavaScript but I'm not too familiar with the language and would really appreciate some help here. I have an image switcher script setup. Its very basic and changes the image displayed on click of a link. Here is what I currently have: Javascript: Code: <script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' />";
obj.innerHTML = imgTag;
return;
}
</script>
HTML: Code: <div id="image1">
<img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/49057_100001550995222_9679_q.jpg" border="0" alt="one" />
</div>
<br>
<a id="one" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/49057_100001550995222_9679_q.jpg','image1');">one</a>
<a id="two" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/174411_100002333675750_7453320_q.jpg','image1');">two</a>
<a id="three" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/41512_100000999943382_7276_q.jpg','image1');">three</a>
<a id="four" href="#" onclick="changeIt('http://profile.ak.fbcdn.net/hprofile-ak-snc4/41477_100001406980454_629_q.jpg','image1');">four</a>
<a id="five" href="#" onclick="changeIt('http://www.dead-paramour.org/fans/fanMCR4.jpg','image1');">five</a>
Its very basic but does what I want. What I'm attempting to do is store the image selected as a cookie so that when users refresh/navigate to other pages the image stays to the one they selected. Is anyone able to help me out with this? Any help is greatly appreciated. Thanks, Chris I am wondering if it would be possible to add a Cookie to this code i found, i am wanting the browser to remember the chosen background image and save it when the user closes the browser. Currently when the option is selected it does not remember the choice when you then go back to the page, any help on this would be much appreciated! Many Thanks Code: <script type="text/javascript">
function changeTheme()
{
var e = document.getElementById("themes");
var theme = e.options[e.selectedIndex].value;
console.log(theme);
document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
}
</script>
<body id="shelf"> <select id="themes" onChange="changeTheme()"> <option value="images/background1.jpg">Default</option> <option value="images/background2.jpg">Oriental</option> </select> Hi everyone, I am using a jQuery cookie script to set the cookie of some elements on my website. One of the problems is that I need the cookie to not expire after one day, I need it to expire after a while (I'm going to start off with a year). Here's my script, the red part is what I've been editing. Code: /**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secu true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000 * 365));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
Hi there, I found this thread on the forum its from a few years back but the code works, but I can't seem to get the image that appears as you rollover the button to display in the correct place. I'm not sure if its because I'm using tables within tables? Should I recode in divs? Any help is greatly appreciated!! http://www.codingforums.com/archive/...p/t-95847.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 trying to display an image using an img tag which uses the array value as the image path here is where i set up the array called " img_path " in the head <script type="text/javascript"> var img_path = [ 'images/west/Home.png', 'images/west/Cold.png', 'images/west/Ocean.png', 'images/west/Beach.png' ]; </script> later, in the body, i'm trying to use the array value to splash the image on the web page, like this <img src=" img_path[0] " width="250" height="250"> the result splashes a 250x250 image area on the webpage but not the image (?). why not the image ? i tested the value of "img_path[0]" and it prints out correctly as 'images/west/Home.png' i even cut/pasted this code in and the image splashed out just fine. <img src=" images/west/Home.png " width="250" height="250"> not sure why this won't work? anyone have any suggestions? thanks, Paul weather in Kalispell, MT this morning........not to bad, about 28deg. Merry Christmas and Happy New Year to all. 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 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>
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 OVERVIEW of main webpage: when a user logs in, they will be directed to the main page of the website; and will see images displayed according to a value that was stored in the database. the main page preloads an image array: Code: <script type="text/javascript">
var img_FILE = [ 'images/house.png',
'images/car.png',
'images/boat.png'
];
</script>
easy enough the database holds a column of integers that are used to access the proper image in the array. i can successfully pull the integer value i need from the db. what i want to do is when the main page loads, i want the value that was pulled from the database to be used to display the correct image. example: lets say i pulled the value 2 from the db. then i want to display img_FILE[2] on the main page when the page "loads". Code: <body>
<div id="quadrantOne">
<img id="firstImg" src="images/blankImg.png" width="190" height="235" />
<script type="text/javascript">
$.post('imageScript.php', 'data=0', function(data,status){
if (status == 'success') { imgValue = data }
else { imgValue = 'error' }
document.getElementById('firstImg').src=img_FILE[imgValue];
});
</script>
</div>
</body>
i debugged imgValue and it is correctly assigned the value coming from the db. but..........the image won't appear on the main page. any ideas how to get this to work? thanks, Paul Williams 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 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"> </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>
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> ° 10010 Atwood Ave. ° Ridgewood, NJ 07451<br /> Phone: (201)555-1101 ° 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>
|
|||||||