Learn VBA & Macros in 1 Week!

JavaScript - Refresh Image Onclick

Full Excel VBA Course - Beginner to Expert

Refresh Image Onclick	View Content

Hello. I need some help with refreshing an image(cgi chart) onclick. This is because the chart changes every minute(due to database update) and i want whenever you click on it to refresh.
My code so far is:
HTML:
Code:

<label for="choseChart">Change chart!</label>
<select id="choseChart" onchange="changeChart('choseChart');"> 
<option value="0" selected="selected">Chart of Months(column)</option> 
<option value="1">Chart of Branches(column)</option> 
<option value="2">Chart of Months(pie)</option> 
<option value="3">Chart of Branches(pie)</option> 
</select><br/> 
 
<img id="chartType" style="cursor: pointer; cursor: hand" onclick="" alt="Chart" src="1.cgi"/>

Javascript:
Code:

function changeChart(chartid) 
{  
	var chart = document.getElementById(chartid).selectedIndex; 
	document.getElementById("chartType").src=changeImage[chart];
}

Full Excel VBA Course - Beginner to Expert

Php / Ajax / Js Refresh Two Divs With One Onclick

Similar Tutorials

View Content

Hi,

Need some help please. I have the following function:

Code:

<script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("ajax").innerHTML=xmlhttp.responseText;
}
}
 
var questionid = document.question.questionid.value;
 
xmlhttp.open("GET","result.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

I then have the following onClick:

Code:

<input type="radio" name="vote" value="1" onClick="getVote(this.value);" />
<input type="radio" name="vote" value="2" onClick="getVote(this.value);" />

Currently, all is good and works perfectly, the div 'ajax' refreshes ajax style with 'result.php' and I can take the value. But what I now need to do is refresh two divs. I have tried everything from putting two onClicks on the radio button, within the 'getVote' function calling in the second function and many more alternatives.

The second function is pretty much the same, just a different div ID:

Code:

<script type="text/javascript">
function getTotal(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("total").innerHTML=xmlhttp.responseText;
}
}
   
xmlhttp.open("GET","total.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

The problem I have, I think, is that both functions need to use 'xmlhttp.open', and it seems once one has ran, the functions end.

Any ideas gratefully received.

Thanks.

Php Ajax / Image Refresh Bug

Similar Tutorials

View Content

hi guys.

i'm having a weird racing condition where an image wont show up the first time but will if you click the trigger again.

to refresh the image I use :
Code:

function updatePieImg(){
	document.getElementById('pie_chart').src = "./lib/php/pie_generator/pie_draw.php?c=" + randomString();
}

function randomString() {
	return new Date().valueOf();
}

I know the drawing receives the correct data because I generate an image map area before to draw which works perfectly.

What should I consider? using a break point in updatePieImg() makes the image pop correctly.

Image Refresh In Sequence Help

Similar Tutorials

View Content

I want the images to change in sequence when the page is refreshed not random like i have below. Can someone help me with this please? Also I also need text to change on refresh to because I am going to have a descritption of the image below. Thanks

[CODE]
<script type="text/javascript" language="JavaScript">

var imgs = new Array('<a href="VW_1.shtml"><img border=0 src="img/samples/VW/large_1.jpg" width=165 height=109" class="thumbnail_img">',
'<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">',
'<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">');

var max = imgs.length;
var num = Math.floor((Math.random() * max));

document.writeln(imgs[num]);

</script>
[CODE]

Ajax Image Refresh Problem

Similar Tutorials

View Content

All,

I am trying to create a page for a application that uses a technique where a page refresh is generated by an ajax call followed by an innerhtml replace on the main page div.

Unfortunately this strange way of refreshing pages is leading to an issue with an image I am trying to display. Every time it refreshes the images flashes off and then is redisplayed, there are other elements on the page( smaller images, text etc... ) and they do not seem to be affected.

The image is not large, only 23 k, but it is the only one affected. If I run the page on firefox I do not encounter this issue which makes me think that is a lovely IE feature that forces the image to be retrived from the server on every innerhtml replace instead of from the cache.

I am using IE8 to test this, any suggestions are greatly appreciated as I have been trying to fix this for a while.

Thanks,
N

Javascript For Image Change At Refresh

Similar Tutorials

View Content

Hello, my name is Paula an I am making a website where I have an image changing on my homepage each time it is reloaded.

I found a code that lets me do this.
This is the script:

<HEAD>

<SCRIPT LANGUAGE="JavaScript">


</script>

It worked fine, with four images.
The thing is I wanted to put up to 16 in it.
So I tried ad up to 16 numbers with images but as soon as I put more than four, it would not work.

Finally what I did was to copy four times the same numbers and then it worked (0-3 , four times)...
so then I had many images shown randomly but the problem now is that the random is very uneven among the images.
Meaning, I get variation among very few, and many time repeating one.

This is what my script looks like now:

<SCRIPT LANGUAGE="JavaScript">


</script>

So my question is:
How can I manage with this script to have all my images showing up equally when they change in refresh?

I don not mind if they are not random, I also tried to remove the random property but could not manage either.

Any ideas?
Thank you so much, I really appreciate your help.
Paula

Help Required - More Than One Simultaneous Image Change On Page Refresh...

Similar Tutorials

View Content

Hi all!

My first post here, searched around for a good website to get some assistance and chose CodingForums.com! I'm a graphic designer, and trying my best at web design too although it's not my profession so I'm still beginner level in a sense I guess.

Anyway, my dilemma at the moment is that I have produced a site where the client would like the logo colour/image to change on refresh which I have achieved by scouring the net for codes and altering them. Now, the client wants the shapes behind the sub-headings to match the current logo colour/image on refresh as well. This would mean if the logo changed to the blue logo, I'd need all the sub-headings to be blue, and vice versa for another 3 colours.

I'm struggling to understand how I can achieve this. At the moment, I have a javascript inside the code of the index page allowing logo image change on refresh but need the sub-headings to change in sync too.

Can anyone help me out here?

Any help is greatly appreciated.

Thanks all!

WxMx

Onclick Change Image

Similar Tutorials

View Content

Onclick To Change Bg Image ?

Similar Tutorials

View Content

Here is my code for two tab images.

Code:

    <a href="#page-2"><img src="/images/but02.png" style="margin-top:8px; float:left;"></a>
    <a href="#page-1"><img src="/images/but01.png" style="margin-top:8px; float:left;"></a>

I need to have it so when tab '#page-2' is clicked it will change the image to '/images/but03.png' and when tab '#page-1' is clicked it will change the image to '/images/but04.png' ?

Its basically to show which tab is active, one image is lighter then the other.

Can anyone help ?

Image Switch Onclick

Similar Tutorials

View Content

I know theres a lot of codes out there online for this but I cannot seem to get any of them to work for me. I am trying to make my layout for an item page for an online store. I'd like one big image, with one or 2 thumbnails under it which when clicked will switch the big image. Clicked, not mouseover.

Lets say my big images would be REG1.jpg and REG2.jpg, the first being the image on the page that will switch. THUMB1.jpg and THUMB2.jpg being the thumbnails.

Is there a simple way to do this or is the code a complete mess like I've been seeing on so many pages? I'd say I have an intermediate understanding of HTML and I've just started teaching myself javascript but I'm starting to fall off the wagon, I can't decipher the stuff coming up in these example codes.

Any help would be thoroughly appreciated!!

Onclick Image Replace

Similar Tutorials

View Content

Hi guys..
Im looking to basically have an image which is a button with a value, and when i click the image, it gets replaced by another image with a different value. when clicked again it would return to the original image and value..
Is this possible? and if so, please help cos im terrible at javascript!

Many thanks

Please Help Me To Make Html Page Load Random Bg Image On Refresh

Similar Tutorials

View Content

Hi. I am new here.
I wanted help for a JavaScript code.
You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code.

What I want to do is to make an html page load a different background image every time it refreshes.
I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this).

I already know how to do an external file (.js) and link to it from my .html page.
Now I want the code to put in the .js file, and the code to put in the <body> of my .html file.

Please help me
Thanks

Change Td Background Image Onclick

Similar Tutorials

View Content

Hi, i have a <td> with a background image and 3 other <td>'s that contains blank photos in them,
i need 2 things that they'll make:
1. when i click on one td that contain blank image lets call it tdimg1 it will toggle the visibility of the div inside the first td lets call it tdframe and for the div lets call it divframe1, (i have a script that works) but the main issue is that when i click tdimg1 tdimg2 and tdimg3 it will show divframe1 divframe2 and divframe3
what i want is that it will show only one at a time, so if ill hit the tdimg2 it will show me divframe2 and if after that ill hit tdimg3 it will hide the divframe2 and appear the divframe3.

2.the tdframe have an image as a background lets call it basicbg.jpg, i want that when i will hit tdimg1 the background of the tdframe will change to lets say newbg1.jpg, and as ill hit it again it will go back to basicbg.jpg, as ill hit tdimg3 it will change to newbg3.jpg and if i wont "close" it and click tdimg2 it will just change it to newbg2.jpg

thanks!

Image Onclick Question - I Can't Figure This Out

Similar Tutorials

View Content

I need some help here. I'm a complete newbie at this.

This is what I would like to have happen. Upon clicking an image (button) I would like a new window to open and I also want to the parent window to load as a new page. I've been searching around and found some code. I implemented it and got the new window to open, but the parent window does not change. Please let me know what to change. Here's what I have:

<script language="JavaScript"></script>

<form>
<input value="Get Quotes Now"
type="image"
src="http://www.xyz.com/pictures/a1.jp"
onmouseout="this.src='http://www.xyz.com/pictures/a1.jpg';"
onmouseover="this.src='http://www.xyz.com/pictures/a2.jpg';"
onclick="newWindow('http://www.xyz.com/compare.html','window2');window.open('http://www.xyz.com/compare2.html','_self',' ')">
</form>

Image Swap With Javascript/onclick

Similar Tutorials

View Content

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

Adding An Onclick Event To An Image.

Similar Tutorials

View Content

Hi all,

I can't seem to add an onclick event to an image. I'm sure I am doing something wrong as I am very new to Javascript.

This is a part of my javascript code that is in the head and body of my HTML file:

Code:

<head>
<script language="JavaScript">
.....
.....
var redLocation0 = redArray[0]+".jpg";
....
....
	function redClick( buttonLocation ) {
	window.location = "http://www.yahoo.com/"
	}
....
....
</script>
</head>


<body>
<table>
<tr>
<td>
<script language="javascript">document.write('<IMG SRC="'+ redLocation0 +'">'); onclick="redClick('0')";</script>
</td>
</tr>
</table>
</body>

The image that is displayed is not clickable, and therefore the function redClick cannot be called.

Can someone please help me and tell me where I am going wrong here. I am kinda new to JavaScript.

Thanks!

Please Help Me To Randomize An Image Array - Onclick

Similar Tutorials

View Content

hi,

i currently have an array of 20 images.
on load a random selection of 15 are taken, then they ordered randomly on the page and doubled (to play a match the pairs memory game)

clicking restart will reorder the images randomly, but will use the same 15 chosen on page load.

i need the restart button to choose another random 15 images from the 20 in the array.

here is the site: http://www.thebigappwall.com/test.htm

and here is the code:
Code:

// Concentration Memory Game with Images - Head Script
// copyright Stephen Chapman, 28th February 2006, 24th December 2009
// you may copy this script provided that you retain the copyright notice
 
function randomOrd(){return (Math.round(Math.random())-0.5); }
 
var back = '/images/back.png';
var tile = ['/images/lij.png','/images/myh_appwall.png','/images/Tap-Forms-icon-40.png','/images/urban-rivals-app-40.png','/images/warshipicon.png','/images/www2pdf-40.png',
'/images/pandora.png','/images/preschoolicon.png','/images/my_virtual_girlfriend_40x40_01.jpg','/images/my_virtual_girlfriend_40x40_02.jpg','/images/my_virtual_girlfriend_40x40_03.jpg','/images/my_virtual_girlfriend_40x40_04.jpg','/images/www2pdf-40.png','/images/preschoolicon.png','/images/pandora.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png','/images/blank32.png'];
 
tile.sort( randomOrd );
  
function randOrd(a, b){return (Math.round(Math.random())-0.5);} var im = []; for (var i = 0; i < 15; i++) {im[i] = new Image(); im[i].src = tile[i]; tile[i] = '<img src="'+tile[i]+'" width="40" height="40" alt="tile" \/>'; tile[i+15] = tile[i];} function displayBack(i) {document.getElementById('t'+i).innerHTML = '<div onclick="disp('+i+');return false;"><img src="'+back+'" width="40" height="40" onclick="addClick();" alt="back" \/><\/div>';} var ch1, ch2, tmr, tno, tid, cid, cnt; window.onload=start; function start() {for (var i = 0; i <= 29 ;i++) displayBack(i);clearInterval(tid);tmr = tno = cnt = 0;tile.sort( randOrd );cntr(); tid = setInterval('cntr()', 1000);} function cntr() {var min = Math.floor(tmr/60);var sec = tmr%60;document.getElementById('c-timer').innerHTML = min+':'+ (sec<10 ? '0' : '') + sec;tmr++;} function disp(sel) {if (tno>1) {clearTimeout(cid); conceal();}document.getElementById('t'+sel).innerHTML = tile[sel];if (tno==0) ch1 = sel;else {ch2 = sel;  cid = setTimeout('conceal()', 900);}tno++;} function conceal() {tno = 0; if (tile[ch1] != tile[ch2]) {displayBack(ch1);displayBack(ch2);} else cnt++; if (cnt >= 15) clearInterval(tid); }

Thanks

Random Image Rotation With Onclick?

Similar Tutorials

View Content

Hey guys,

Right now I have a random rotating slideshow with delay script implemented on a website. However I want to make ONE of the slides/images clickable to open up a PDF doc.

Can you please let me know what I need to add/change in this to make it do what I need? I am not big on java so need some help.

Thanks in advance!

Code:

<script language="javascript">

/*
Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com)
For this script and more, visit http://www.javascriptkit.com
*/

var delay=12000 //set delay in miliseconds
var curindex=0

var randomimages=new Array()

	randomimages[0]="images/simple_img_11.jpg"
	randomimages[1]="images/simple_img_2.jpg"
	randomimages[2]="images/simple_img_3.jpg"
	randomimages[3]="images/simple_img_4.jpg"
	randomimages[4]="images/simple_img_5.jpg"
	randomimages[5]="images/simple_img_6.jpg"
	randomimages[5]="images/simple_img_7.jpg"	

var preload=new Array()

for (n=0;n<randomimages.length;n++)
{
	preload[n]=new Image()
	preload[n].src=randomimages[n]
}

document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">')

function rotateimage()
{

if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex

	document.images.defaultimage.src=randomimages[curindex]
}

setInterval("rotateimage()",delay)

</script>

Onclick ..... Display New Image In Specific Div

Similar Tutorials

View Content

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

Change Image Src Value Onclick Not Working Ff

Similar Tutorials

View Content

Code:

<img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle">
<img id="chosen" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image" onclick="chosen()">
<img id="ambassador" class="selector" src="selector.jpg"  alt="Click for next image" title="Click for next image"onclick="ambassador()">

Code:

function chosen()
{
document.getElementById("who").src="chosen_for_christ.jpg";
}

function ambassador()
{
document.getElementById("who").src="ambassador.jpg";
}

Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything.

Onclick Image Size Toggle

Similar Tutorials

View Content

hello friends I'm a newbie..

I need a little help. Im using big images in my website. I want a javascript to toggle the image size from "Original size to fit with resolution of screen" and vice versa.

It should be onclick function like this

<img id="blahblah" src="myimage.jpg" onClick="resize();" />