|
JavaScript - Onclick For Div Background Change And Link To Iframe...help Please
I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes.
So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions? Code: <?xml version="1.0" encoding="UTF-8"?>
<!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>Welcome to Whitetail Fantasies</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
font-family:Tahoma, Geneva, sans-serif;
background-color: #000;
}
#background {
position:absolute;
float:left;
width:1024px;
height:768px;
background-image:url(wf_layout/wf_bkgnd-1.jpg);
z-index:0;
}
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')">
<div id="background"></div>
<div id="outer">
<div id="header"></div>
<div id="wrapper">
<div id="left_side"><br /><br /><br /><br /><br /><br /><br />
<table width="140" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td>
</tr>
<tr>
<td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td>
</tr>
<tr>
<td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td>
</tr>
<tr>
<td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td>
</tr>
<tr>
<td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices" /></a></td>
</tr>
<tr>
<td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div>
<div id="content_area">
<br /><br /><br />
<iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe>
</div>
iu
</div>
</div>
<div id="footer"></div>
<map name="Map" id="Map">
<area shape="poly" coords="0,100" href="#" />
<area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" />
</map>
</body>
</html>
Similar TutorialsHi, 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 all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript">
var Lst;
function CngClass(obj){
if (typeof(obj)=='string') obj=document.getElementById(obj);
if (Lst) Lst.className='';
obj.className='On';
Lst=obj;
}
</script>
HTML: Code: <div id="navWrapper">
<div id="globalNav">
<ul>
<li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li>
<li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li>
</ul>
</div>
<div id="localNav"></div>
</div>
Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. I am a javascript newbie. I have a radio website that runs a live stream 24/7. The live stream is loaded in to an iframe named "stream". I only ever have 2 files that show in that iframe. 1 for when the user has the stream on and another for when they turn it off. stream_on.php and stream_off.php I also have podcasts on the site and my goal is when the user clicks the .swf object to play the podcast, the live stream in the iframe changes to stream_off.php so that the 2 audios don't overlap each other. Here's the code I have so far for the .swf object. PHP Code: <object type='application/x-shockwave-flash' data='player_mp3_maxi.swf' width='50' height='20' class='blur' onclick="window.open('stream_off.php','stream')\"> <param name='movie' value='player_mp3_maxi.swf' /> <param name='bgcolor' value='#666666'>"; if ($row['location'] == "") { echo "<param name='FlashVars' value='mp3=". $site ."podcasts/". $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />"; } else { echo "<param name='FlashVars' value='mp3=http://". $row['location'] . $filename ."&showslider=0&showstop=1&autoload=0&bgcolor1=330066&width=50' />"; } </object> And the code for the iframe. It's default state is stream_on.php since on load I want the stream to start right away. I only need it to change upon clicking of any .swf object on the page. PHP Code: <iframe src='stream_on.php' id='stream' marginheight='0' width='195' height='110' frameborder='0' scrolling='no'></iframe> As you can see, I put the onclick in the object tag. Is this correct ? Is there a piece of javascript code I am missing ? Please Help. I have an iframe on my page which begins at 300x250. Onclick from an outside control (button), I have it resizing to 720x405. What I need it to do on that same click is change position on the page as well as resize (top, left.) Any way I can do this? Here's my resize script and the accoutrements with it... <!---Begin head section here---> <head> <!---Begin Style Section Here---> <style> .fauxButton { background: buttonface; font: menu; border: 1px outset white; cursor: default; padding-left: 6; padding-right: 6; padding-top: 2; padding-bottom: 1; border-top: 1px solid buttonhighlight; border-left: 1px solid buttonhighlight; border-right: 1px solid buttonshadow; border-bottom: 1px solid buttonshadow; height: 20px; } </style> <!---End Style Section Here---> <script language="JavaScript"> function resizeIframe(iframeId, iframeHeight, iframeWidth) { if (iframeWidth>0) { document.getElementById(iframeId).style.width=iframeWidth; } if (iframeHeight>0) { document.getElementById(iframeId).style.height=iframeHeight; } } </script> </head> <!---End head section here---> <body> <iframe name=video_iframe id=video_iframe frameborder="0" src="player.asp" scrolling=no allowtransparency="true" style="position:absolute; width:300px; height:250px; top:361px; left:720px;align:top; align:left; border:0px solid #FF0000; background-color:#FFFFFF; padding:0px 0 0; z-index:3;"> </iframe> <a id="widenButton" class=fauxButton onclick="resizeIframe('video_iframe', 420, 720);document.getElementById('widenButton').style.display='none';document.getElementById('narrowButt on').style.display='inline';" style="display:inline;">Wide -></a> <a id="narrowButton" class=fauxButton onclick="resizeIframe('video_iframe', 250, 300);document.getElementById('narrowButton').style.display='none';document.getElementById('widenButt on').style.display='inline';" style="display:none;"><- Narrow</a> </body> Thanks in advance, Miz Parker I have the concept down to change the CSS for a label when I click it. <label class="text" onClick="this.className='big_text" style="margin:5px;">Text</label> I was wondering, the goal is that it works, it changes from small text to big text when selected, but how can I change to back to small text from big text and vice versa using java for only the CSS? Much appreciated! C8 Hi, I have a row of buttons that are made by innerhtml using this code: Code: sidebar_html += '<div id="button"><input type="button" onclick="toggleRun('+poly_num+')" value="Start Bus" id="runBtn'+poly_num+'" style="width:120px; height:24px; text-align:center"></div><br />';
to fire this function: Code: function toggleRun(poly_num){
var btn = document.getElementById('runBtn'+poly_num);
if (document.getElementById('runBtn'+poly_num).onclick) {
if (run){
run=false;
document.getElementById('runBtn'+poly_num).value="Reload Page";
startAnimation(poly_num);
} else {
run=true;
document.getElementById('runBtn'+poly_num).value="Reload Page";
window.location.reload();
}
}
}
the function can only run once, so the idea is that the button either runs it the first time or reloads the page. at the moment, the way it's working is that the button that's clicked changes its value to "Reload Page" but the others keep their original value, even though it reloads if you click them. So I'd like a way to change the value of the rest of the buttons when one is clicked. Is that possible? Here's the page if I didn't explain myself well enough. Hi Guys, How could I change Code: <a onclick="processForm();">Continue</a> to Code: <input type="checkbox" name="agree" value="1" onclick="if(this.checked).processForm();" /><label for="agree">Continue</label> or to Code: <input type="checkbox" name="agree" value="1" checked="checked" onchange="if(this.checked).processForm();" /><label for="agree">Continue</label> Code: <script type="text/javascript">
function processForm() {
$.ajax( {
type: 'POST',
url: '<?php echo $submit); ?>',
data: '<?php $data); ?>',
success: function(data) {
$('#message').html(data);
}
} );
}
</script>
when i Using <a onclick="processForm();">Continue</a> then work fine, but i needed the checkbox. Anyone could help me? 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 have managed to get my program running perfectly for outputting alert boxes, however instead of alert boxes I would like my image to change with an IF statement. My main image is a pic with text saying Please enter Temperature. if the user enters a temperature it will display an alert saying HOT, MODERATE or COLD. I have made other images that basically say the same thing and I would like the appropriate image to replace the original image depending on the IF statement I have commented out my alertboxes (which work) and replaced new code above that I can't seem to get working. On lines 21, 27 and 33. Any help would be greatly appreciated. Code: <html>
<head>
<title>TempReader™</title>
<script type="text/javascript">
//This is where we decare our function to validate the HTML form
function validateform()
{
// Setting our variable name and it's value by calling it from the HTML form textbox
var temp = document.forms["inputform"]["temperature"].value
// If the input is not a number or an empty field, alert the user and stop the program
if (isNaN(temp) || temp == "")
{
alert("Please enter a number");
return false;
}
//If the input is valid we compare the input value and display the appropriate output
if (temp > 35)
{
document.getElementById("temp_img").src ="temp_hot.png";
//alert("Wow, it's really hot!");
}
else if (temp <= 35 && parseFloat(temp) >= 18)
{
document.getElementById("temp_img").src ="temp_mid.png";
//alert("It's a comfortable temperature right now");
}
else if (temp < 18)
{
document.getElementById("temp_img").src ="temp_cold.png";
//alert("Brrr, it's a little bit cold for my liking");
}
}
</script>
</head>
<body>
<div style="margin-top:0px; text-align:center">
<img id="temp_img" src="what_temp.png" alt="Temperature" />
</div>
<form name="inputform" method="post" action="">
<table>
<tr><td><input type="text" name="temperature" value="Enter Temperature"></td></tr>
<!-- Below is submit button that when pressed validates the form -->
<tr><td><input type="submit" value="Submit" onclick = validateform()></td></tr>
</table>
</form>
</body>
</html>
BTW, My images are stored in the same directory as the HTML file and the img names are correct How do I change the Button's value onClick? I want it to initially be "Read More" and then change to "Show Less" Code: <script type="text/javascript">
function toggleMe(a){
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none"){
e.style.display="block"
}
else{
e.style.display="none"
}
return true;
}
</script>
<div>Why are we going to stop making investments in companies like this?</div>
<span id="obamaenergyapril212011" style="display:none;">
END 12:50 P.M. PDT</span>
<input type="button" name="obama" onclick="return toggleMe('obamaenergyapril212011')" value="Read/Hide More" >
hi all, I am using ajaxcontent javascript to load content into certain parts of the website and all my links work that way.. the problem with that is that I can't use classical approach for building menus.. like when you assign "current " class to your link and then it changes color or whatever when you follow link to another html or whichever website. So I have menu like this .. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');"><b>Five</b></a></li>
I'm sorry for my English is so bad.. but I will try to explain what I'd like to achieve.. I'd like to put in some kind of onclick script which will change class of that <li> to current but at the same time I want to change <li class="current"> to <li class=""> or <li class="whatever">... so here I go again.. Code: <li class="current"><a href="index.htm"><b>One</b></a></li>
<li><a href="javascript:ajaxpage('2.php', 'right');"><b>Two</b></a></li>
<li><a href="javascript:ajaxpage('3.php', 'right');"><b>Three</b></a></li>
<li><a href="javascript:ajaxpage('4.php', 'right');"><b>Four</b></a></li>
<li><a href="javascript:ajaxpage('5.php', 'right');" onclick="this.className='current'"><b>Five</b></a></li>
Now this changes the <li> class to current and I only want to have 1 current. In this case link "Five" should have current class others should have no class or class="whatever" its same Thank you for any answers in advance Hi im trying to do this: I have an app multilanguage english & spanish at the start of page it appears english flag but webpage on spanish like this pictu and when i click english flag then it turns english webpage and flag change to spanish like this image: im trying to make a loop cause when i click again spanish flag it turns to english flag but when i click again english flag it doesnt appears anything i dont get any javascript error here is my code of flags: Code: <div id="lang_panel">
<div id="ZA_lang" onclick="setLang('PA'); toggle2();"></div>
<div id="PA_lang" onclick="setLang('ZA'); toggle();"></div>
</div>
the Code: setLang('PA')
is for set webpage language. and Code: toggle(); & toggle2(): i made if for changes the flag here is full toogle & toggle2 functions: Code: function toggle() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "block";
$("PA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
function toggle2() {
var ele = document.getElementById("PA_lang");
if(ele.style.display == "block") {
ele.style.display = "none";
$("ZA_lang").style.background = "url('./img/ui/l_ZA_on.png') no-repeat";
}
else {
ele.style.display = "block";
}
}
Code: l_ZA_on.png is USA flag Code: l_PA_on.png is Panama flag Hi, is it possible to change the class of an element onClick with a fade? This is the code I have so far which works great for changing the class but I have no idea how to include a fade in this. I am changing the class in order to change the background-image of a div. Code: <a href="#none" onclick="document.getElementById('tool').className ='tool1'">
Many thanks, M 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? I would like to have a text link do 2 things: 1. Change #box1.style1 to class="style2" (from style1) 2. Change #box2.style2 to class="style1" (from style2) So the text link would not change its own style, but change the class of 2 different divs Your help on this is very much appreciated. Thank you 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. |
|||||||