JavaScript - Image Onclick Question - I Can't Figure This Out

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 ?

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];
}

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!!

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!

I am trying to add a border around the base they select and then when they select another one, I want the previous one to go away and then high light that one.
This is my PHP code that outputs the bases:
Code:

$gender = $_GET['gender'];
// SQL Injection here?
$sql = "SELECT * FROM habases WHERE gender='".$gender."'";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$baseCount = 0;
while ($row = mysqli_fetch_assoc($result))
{
	$baseimage = $row['image'];
                                                                                    
	$basesOutput .= "<input type=\"image\" id=\"".$baseCount."\" src=\"http://www.elvonica.com/".$baseimage."\" onclick=\"baseBorder(".$baseCount.");return false;\" value=\"".$baseimage."\" name=\"base\">";
	$baseCount++;
}

I have a baseCount so each image ID is unique. The baseBorder() is the function that will change the border.

Here is the baseBorder() function:
Code:

var prevId;
function baseBorder(count)
{
	if (prevId)
	{
		$("#prevId").style.border="none";
	}
	else
	{
		$("#count").style.border="2px solid #E8272C";
		prevId = count;
	}
}

Can anyone help me out since it's not working?

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();" />

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

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

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>

I want to create the form button similar to this:
http://www.customusb.com/quoteform-wref-flashdrives.php

Im a designer and i m a total noob in javascript, would appreciate very much if you could be patient with me....

i use an OnClick to switch the image but the if else statement just doent let me switch back to the original image, i not sure where i have gone wrong...

appreciate again if anyone could help me out...

below are the html and js thumnails:
http://img215.imageshack.us/f/73258715.jpg/
http://img35.imageshack.us/f/44225148.jpg/

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 ??

I just started my javascript class two weeks ago and am having troubles already and my book is no help.

My first assignment is having a list of country names and when you click the radio button next to the name the country flag pops up in a designated area for the image. I have tried a few different things but nothing is working. I have the list of countrys and the radio buttons but when i click the radio button the image doesn't pop up. Also, when i click another radio button they all stay selected.

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.

Hi guys,

I'm new to javascript but cannot figure out a way to do something or even if its possible.

On the site there is an image with some descriptive text to the side, here is the work in progess link to the site for an idea www.igrey.co.uk/nbe

I want to be able to click the arrows and the text and images change so you can scroll through a couple of different projects

Any help or advice would be greatly appreciated

All the best,

Ian

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!