|
JavaScript - Display An Image Via Database Integer Value
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 Similar Tutorialshi, im fairly new to javascript but i know the basics. im just wondering is there a possibility to make a search that will connect to my databse with a product list in it, and then display any matches to what the user searched for? help is always helpful 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 Can someone point me in the right direction for using Javascript to increase a number over time without refreshing the page? I also need it to continually go up, and not start at 0 on every refresh. Is this possible? Blockis Frustrated by the fact that you don't have the integer division operator in JavaScript? Here's a surprisingly little known method: parseInt(19/4) = 4 Now when a VBguru or vbscripter says "ha ha, I can integer divide and you can't!" You now know better. Hi all, this is my first post to this great useful forum. I have a javascript 2d array [x,y] that contains integer values like this: [0,0], [0,1], [0,2], [0,3], [1,0], [1,1], [1,2], [2,0], [2,1], [2,2], [0,-1], [0,-2], [0,-3], [1,-1], [1,-2], [2,-3] my question is how to get the max,min y value for each x. for the sample above it should give me another array with the following results [0,3],[0,-3],[1,2],[1,-2],[2,2],[2,-3] your help is highly appreciated Regards Omran In some cases toPrecision(X) will result in an integer value, which is the expected result. However, it is typical in some fields to always follow the integer value with a decimal and zero (i.e 522 --> 522.0). Technically, this would be incorrect since it would imply an extra digit of precision that does not exist. However, this is often disregarded, provided there are sufficient number of digits (i.e. precision of 5+). That said, is there any way to force an integer result to have a trailing ".0"? Hi, I was hoping you could help me, I was wanting to write text to the screen but without re-writing the whole screen (e.g. document.write();. I wish to take text and put it in a function, modify it, then display it. So far I have: Code: <script type = "text/javascript">
function calculate(text){
var x = "10.0";
var gpa = text.replace(/0.0/g,x);
document.getElementById("text").innerText=gpa;
}
</script>
<p id = text >Your Grade Point Average (GPA) is: 0.0</p>
<button type="button" onclick="calculate(text)">Calculate</button>
Your help would be really appreciated Does JavaScript have an easy of converting an ordinary integer like 135 into a time format like 02:15? I'm working on a timer that handles the backend with just a plain integer that counts down every second but it needs to output looking like a clock.
Hi all, I am having a problem converting a physical string to a integer. I have a dropdown list of a few items but are numbers though in chracters. I ned to output the value and the text of the selected item. As I cannot use a if-else statement, any help would be great. Code: <select id="std_num" onchange="displayValue()">
<option value="Two">Two</option>
<option value="Zero">Zero</option>
<option value="Five">Five</option>
<option value="Three">Three</option>
<option value="Two">Two</option>
<option value="Zero">Zero</option>
</select>
Code: function displayValue()
{
alert(document.getElementById('std_num').value);
var c = (document.getElementById('std_num').value);
}
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 Another homework assignment that I can't quite seem to get to work... I've been asked to do the following using javascript: -Create a function named randInt() with one parameter of "size". Declare a variable named "rNum" equal to a random integer between 1 and the value of the size variable. Return the value of the "rNum" varialbe from the function. -Create a function named getQuote() with one parameter anemd "qNum". The function should create an array named mtQuotes with five quotes; there should be no quote for the array index "0". Return the value of the mtQuotes array for the qNum index. - In the div element of "quotes" insert a script with the following commands: Declare a variable named "randValue" which is euqal to a random integer between 1 and 5 (use the randInt() function). Declare a variable named "quoteText" containing the quote whose array index value is equal to randValue. Write the value of quoteText to the web page. Here is what I have...it returns undefined. thanks. Code:
<html>
<head>
<script type="text/javascript">
function randInt(size) {
var rNum=Math.ceil(Math.random()*5);
return(rNum);
}
</script>
<script type="text/javascript">
function getQuote(qNum);
var mtQuotes = new Array();
mtQuotes[0] = "";
mtQuotes[1] = "I smoke in moderation, only one cigar at a time.";
mtQuotes[2] = "Be careful of reading health books, you might die of a misprint.";
mtQuotes[3] = "Man is the only animal that blushes or needs to.";
mtQuotes[4] = "Clothes make the man. Naked people have little or no influence on society.";
mtQuotes[5] = "One of the most striking differences between a cat and a lie is that a cat has only nine lives.";
return mtQuotes[qNum];
</script>
</head>
<body>
<div id="quotes">
<script type="text/javascript">
var randValue=randInt(5);
var quoteText=getQuote(randValue);
document.write(quoteText);
</script>
</div>
Well I have an array and a button to select a random integer from the array, how do I make it so that it selects every integer once til all are selected, then it starts over again? For example, an array has these: A B 1 2 Q F So you press the button a number of times, and you get: Q B 1 F A 2 Instead of: 1 Q A 1 B A I have some asp:radiobutton lists that need to update a label with the sum of their values each time a user selects a new value. I am brand new to javascripting and would like some insight on how to get this done. I have inserted my code below. Code: <asp:Label runat="server" Text="Greeting:" /> <asp:Label runat="server" ForeColor="Red" ID="lbl_GreetingScore" Text="0" /> <asp:RadioButtonList ID="rdb1_1" runat="server" RepeatDirection="Horizontal"> <asp:ListItem Selected="True" Text="N/A" Value="4" /> <asp:ListItem Text="Yes" Value="4" /> <asp:ListItem Text="No" Value="0" /> </asp:RadioButtonList> 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 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. 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>
|
|||||||