JavaScript - Image Switch Onclick

My goal is to have one big picture center with 4 smaller pictures to the left that you click on and is target to the center. When you click on the center it will zoom. I haven't worked on it in a few years and not able to find the person who wrote the code. I added the zoom coding to the picture switch. The zoom works fine but when you click the smaller images the image is not viewable.

Coding in the head

Code:

<!--Image Viewer-->
	<script language="javascript" type="text/javascript">
<!--

function canManipulateImages() {
	if (document.images)
		return true;
	else
		return false;
}

// loadPosterImage

function loadPosterImage(imageURL) {
	if (gImageCapableBrowser) {
		document.imagePoster.src = imageURL;
		return false;
	}
	else {
		return true;
	}
}

gImageCapableBrowser = canManipulateImages();

// -->
</script>
<!--End Image Viewer-->


<!--Picture Zoom-->
<script>
// C.2004 by CodeLifter.com
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
<!--End Picture Zoom-->

The body code

Code:

<!--Picture #4-->
<tr>

	<td><A href="F:\mamies\santa_pic\purple_bottom.gif"
		   onClick="return(loadPosterImage('F:\mamies\santa_pic\purple_bottom.gif'))">
		<img src="F:\mamies\santa_pic\purple_bottom.gif" 
			   border=1 align=center width=56 height=75></A>
	 </td>


</tr>
</table>

	<table align="center" border="1" cellspacing="0" cellpadding="5" height="10" bgcolor="#002152" bordercolor="#980008">

<tr>

<!--Image Zoom-->
	<td><img name="imagePoster" src="F:\mamies\santa_pic\purple_front.gif"
border="0" 
width="354"
height="502"
onclick="zoomToggle('354px','502px','708px','1004px',this);">
<!--End Image Zoom-->

Thanks for your help

Charlene

Example of my problem:
HERE

The code is derived from a site offering some advice for javascript:
HERE

The example of mine tries to use an image as hyperlink... and use mouse events for certain actions.

Aside from possibly being the worst javascript code humanly possible...once I slaughtered the code from the site mentioned above, I'm not getting how to arrange things so that a mouse over event switches an image , as does mousedn and mouseup, And (and this is the rub for me) repeating the setup in the same way for a list of quicktime video links.

I've got it to work for one row in the table I'm using to attempt some kind of formatting.

I'm told `css' is a better way for that but I'm completely ignorant about how to use `css'. So, for now I'm using a table to get at the javascript question.

The idea is for viewer to see three red dots at the front of each item being offered.

Mouseover is supposed to switch to a green arrow... mousedn is supposed to switch to 2 check marks. I wanted the check marks to persist, so for lack of knowing how to accomplish that... I let mouseup call the same image. (the check marks; Maybe just omitting any directive for mouseup would have the same effect?)

About the `image persisting after being clicked' question: It is really a separate question so I will probably start a different thread for that.

What I've done works for one list item... but fails for more than one.

The only active member of the list (2 in my example) is the bottom one. mouse events on the top one are carried out on the bottom one.

I tried to just change the name of all variables in the javascript, and the name given in the `img src=' section of the html code, for the second row... but clearly not what is needed. I changed the names shown below by incrementing the number in the names by 1.
I've only posted one row's worth but the next row uses the same code with the variables incremented.

And hopefully someone will look at the actual example (URL given above) and see the full code.

The basic code I've put here for convience.:

Code:

<table>
<tr>
<td valign=top >
<A href="./t2.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" 
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton_0" src="./3dots.png" border="0" 
alt="javascript button"></A> some nice video 
<SCRIPT language="JavaScript">
var myimgobj_0 = document.images["jsbutton_0"];

function changeImage()
{
document.images["jsbutton_0"].src= "./aro1r-mo.png";
return true;
}
function changeImageBack() 
{
 document.images["jsbutton_0"].src = "./3dots.png";
 return true;
}
function handleMDown()
{
	document.images["jsbutton_0"].src = "./checks.png";
	return true;
}
function handleMUp()
{
        document.images["jsbutton_0"].src = "./checks.png";
	return true;
}
</SCRIPT>
</tr>
</td>

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

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

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 ?

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/

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!

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>

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

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

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

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"><!--
function newWindow(file,window) {
msgWindow=open(file,window,'resizable=no,width=1500,height=1000');
if (msgWindow.open == null) msgWindow.open = self;
}
//--></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>

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?