|
JavaScript - Toggle Multiple Images
Hi all,
I have a number of images placed on a map (the images are dots indicating a location) When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain: http://www.garethhardy.com/Shine/?page_id=6 What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack. Hope that makes sense! Thanks in advance Dan Similar TutorialsHi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! Hello can anyone help me with modestmaps? I need to add my own map I mean lots of images to it but my JS knowledge is kinda poor. Can anyone help? Feel free to suggest other map frameworks I don't need anything special it should be light-weight, ability to add my own maps and put some markers on it. Thanks in advance. EDIT: Oh I forgot and license should allow modifications and using it in website which is comerecial. I mean I won't take payment for viewing it but it still comercial. I am trying to make different images hover over a table of sliced images when you mouse over a particular image. ex. mouse over image 1 = have image 1.1 hover over entire table of images in spot A; mouse over image 2 = have image 2.2 hover over entire table of images in spot B....ect. what i have so far only allows me to mouse over image 1 and have image 1.1 hover over entire table in spot A. Any time i try to move forward with more div's on other images it just jacks everything up. Here it is:
Code: <html>
<head>
<title>map</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function init()
{
loadAll(document.getElementById('map1'));
}
window.onload = init;
function loadAll(arrayLoading)
{
var areas = arrayLoading.getElementsByTagName('area');
for(var i=0;i<areas.length;i++) areas[i].onmouseover = mouseIsOver;
}
function mouseIsOver()
{
var area = this;
var coords = this.coords;
var x1 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var y1 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var x2 = parseInt(coords);
coords = coords.substring(coords.indexOf(",") + 1);
var y2 = parseInt(coords);
var img = document.createElement("img");
img.src = area.getAttribute("imgSrc");
img.style.position = 'absolute';
img.style.left = x1 + 'px';
img.style.top = y1 + 'px';
img.style.height = y2 - y1 + 'px';
img.style.width = x2 - x1 + 'px';
area.parentNode.appendChild(img);
img.onmouseout = function ()
{
this.parentNode.removeChild(this);
setTimeout(function () { area.onmouseover = mouseIsOver; }, 50);
};
area.onmouseover = null;
}
</script>
<style type="text/css">
#map1
{
position: relative;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (map.psd) -->
<table id="Table_01" width="651" height="761" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="14">
<img src="images/map_01.png" width="650" height="213" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="213" alt="" /></td>
</tr>
<tr>
<td colspan="11">
<img src="images/map_02.png" width="442" height="48" alt="" /></td>
<td colspan="2">
<img src="images/map_03.png" width="87" height="48" alt="" /></td>
<td rowspan="14">
<img src="images/map_04.png" width="121" height="547" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt="" /></td>
</tr>
<tr>
<td colspan="6" rowspan="4">
<img src="images/map_05.png" width="257" height="164" alt="" /></td>
<td colspan="3" rowspan="2">
<img src="images/map_06.png" width="92" height="69" alt="" /></td>
<td colspan="3" rowspan="2">
<img src="images/map_07.png" width="94" height="69" alt="" /></td>
<td>
<img src="images/map_08.png" width="86" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td rowspan="12">
<img src="images/map_09.png" width="86" height="498" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="68" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<div id="map1">
<div class ="noborder">
<img src='images/map_10.png' alt="" width="93" height="95" usemap=#airmap>
<map name=airmap>
<area shape=Rect Coords=-17,-5,107,109 imgSrc="images/Rt5.png" />
</map>
</div>
</div></td>
<td colspan="2">
<img src="images/map_11.png" width="93" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="10">
<img src="images/map_12.png" width="93" height="429" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="94" alt="" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/map_13.png" width="230" height="81" alt="" /></td>
<td colspan="4" rowspan="3">
<img src="images/map_14.png" width="77" height="82" alt="" /></td>
<td colspan="2">
<img src="images/map_15.png" width="43" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="8">
<img src="images/map_16.png" width="43" height="334" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="80" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/map_17.png" width="153" height="84" alt="" /></td>
<td rowspan="2">
<img src="images/map_18.png" width="77" height="84" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="3">
<img src="images/map_19.png" width="28" height="83" alt="" /></td>
<td rowspan="6">
<img src="images/map_20.png" width="49" height="253" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="83" alt="" /></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/map_21.png" width="119" height="48" alt="" /></td>
<td colspan="4" rowspan="2">
<img src="images/map_22.png" width="112" height="48" alt="" /></td>
<td colspan="2">
<img src="images/map_23.png" width="27" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="4">
<img src="images/map_24.png" width="27" height="169" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="47" alt="" /></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/map_25.png" width="120" height="62" alt="" /></td>
<td colspan="3">
<img src="images/map_26.png" width="111" height="23" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt="" /></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/map_27.png" width="111" height="99" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt="" /></td>
</tr>
<tr>
<td colspan="2">
<img src="images/map_28.png" width="120" height="60" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="60" alt="" /></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="119" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="49" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="42" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="92" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="86" height="1" alt="" /></td>
<td>
<img src="images/spacer.gif" width="121" height="1" alt="" /></td>
<td></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
Hi, I've got a game 99% finished, basically when the game start and the player clicks through to the game panel, there are 30 tiles (80x80px) each, and the object of the game is for the player to press the tile with the letter "X" on, the X can be on any 1 of 5 different coloured tiles at anyone time and of course there can be more than 1 tile having an X on it. The tiles currently are built via .css, and this works 100% perfectly. However now I want to use images, pulled in from my local website instead of tiles built via .css. A demo of what I'm kinda of after is here > Edit fiddle - JSFiddle - if you press "run" the images will keep changing their order. The code I currently have for the game is here.. //CODE// var TheColorArray = ['red', 'yellow', 'green', 'blue', 'orange'], TheScore = 0, TimerLength = 2500, GameTimer, ScoreMap = { 'red': 500, 'yellow': 50, 'green': 30, 'blue': 20, 'orange': 5 }; function DrawRow() { TheColorArray.sort(function () { return .5 - Math.random(); }); var TheHTML = '<div class="row">'; var MagicColumn = Math.floor(Math.random() * 6); for (var i = 0; i < 5; i++) { if (i === MagicColumn) { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>'; } else { TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>'; } } TheHTML = TheHTML + '</div>'; return TheHTML; } You'll also see that "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">x</div>';" and "TheHTML = TheHTML + '<div class="GameTile ' + TheColorArray[i] + '">' + String.fromCharCode(97 + Math.floor(Math.random() * 26)) + '</div>';" both state that if X is pressed the game basically carries on. I need this to use a chosen image from my server, i.e. URL/apple.png .... i have also managed to get to this point (with apples) but its just not working.. Edit fiddle - JSFiddle Any help would be great.. Many thanks in advance!!! I'm still kinda new at this. Please bear with me..I'm trying to make all imgs move in different directions using the following code. I was givin the code and I need to insert something into it so this will work. I just can't understand it and WANT to ..driving me NUTTY. Code: <!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>BUZZ</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var widthMax = 0;
var heightMax = 0;
var buzzSpeed = new Array(3);
buzzSpeed[0] = 10;
var xPosition = new Array(3);
xPosition = -20;
var yPosition = new Array(3);
yPosition[0] = 0;
var xDirection = new Array(3);
xDirection[0] = "right";
var yDirection = new Array(3);
yDirection[0] = "down";
function setBug(newStartPoint) {
widthMax = document.documentElement.clientWidth;
heightMax = document.documentElement.clientHeight;
setInterval("flyBug(0)", 30);
}
function flyBug(curBug) {
var activeBug = document.getElementById("bugImage" + curBug);
var activeElement = document.getElementById("bugElement" + curBug);
if (xDirection[curBug] == "right" && xPosition[curBug] > (widthMax - activeBug.width - buzzSpeed[curBug]))
xDirection[curBug] = "left";
else if (xDirection[curBug] == "left" && xPosition[curBug] <= 0)
xDirection[curBug] = "right";
if (yDirection[curBug] == "down" && yPosition[curBug] > (heightMax - activeBug.height - buzzSpeed[curBug]))
yDirection[curBug] = "up";
else if (yDirection[curBug] == "up" && yPosition[curBug] <= 0)
yDirection[curBug] = "down";
if (xDirection[curBug] == "right")
xPosition[curBug] = xPosition[curBug] + buzzSpeed[curBug];
else if (xDirection[curBug] == "left")
xPosition[curBug] = xPosition[curBug] - buzzSpeed[curBug];
else
xPosition[curBug] = xPosition[curBug];
if (yDirection[curBug] == "down")
yPosition[curBug] = yPosition[curBug] + buzzSpeed[curBug];
else if (yDirection[curBug] == "up")
yPosition[curBug] = yPosition[curBug] - buzzSpeed[curBug];
else
yPosition[curBug] = yPosition[curBug];
activeElement.style.left = xPosition[curBug] + document.documentElement.scrollLeft + "px";
activeElement.style.top = yPosition[curBug] + document.documentElement.scrollTop + "px";
}
window.onresize = setBug;
</script>
</head>
<body onload="setBug()">
<div id="bugElement0" style="position:absolute; left:20px; top:0px;">
<img id="bugImage0" src="bug.jpg" alt="buggy" height="48" width="48" /></div>
<div id="bugElement1" style="position:absolute; left:25%; top:75%;">
<img id="bugImage1" src="bug.jpg" alt="buggy1" height="48" width="48" /></div>
<div id="bugElement2" style="position:absolute; left:40%; top:48%;">
<img id="bugImage2" src="bug.jpg" alt="buggy2" height="48" width="48" /></div>
<div id="bugElement3" style="position:absolute; left:58%; top:58%;">
<img id="bugImage3" src="bug.jpg" alt="buggy3" height="48" width="48" /></div>
<div id="bugElement4" style="position:absolute; left:90%; top:75%;">
<img id="bugImage4" src="bug.jpg" alt="buggy4" height="48" width="48" /></div>
</body>
</html>
Hey all, First off, just wanted to send a big thanks out to everyone on this board that has helped me along my path, you all have been a really big help! Ok, now on to today's question. I have a nice little script that changes a company's logo (displayed in a side bar) when the user mouses over a part of an image map. Here is the basic code: Code: <head>
<?php
//assign array of links to string
$row_limit = $num_rows - 1;
for ($otmm_loop=0;$otmm_loop<$num_rows;$otmm_loop=$otmm_loop+1)
{
if ($otmm_loop == 0)
{
$otmm_image_string = "$pic_adr_array[$otmm_loop]".",";
}
elseif ($otmm_loop == $row_limit)
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]";
}
else
{
$otmm_image_string = "$otmm_image_string"."$pic_adr_array[$otmm_loop]".",";
}
}
$s1 = "$otmm_image_string";
$qs1 = "\"".implode("\",\"",explode(",",$s1))."\"";
<script type="text/javascript">
function doChanges(y){
var z= y;
var imagevar = myimages[z];
var imagethis = this.href;
changeimage(imagevar,imagethis);
}
</script>
<script type="text/javascript">
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
</script>
<script type="text/javascript">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(<?echo("$qs1");?>);
</script>
</head>
<body>
<a href="javascript:warp()"><img src="/images/OnTheMiningMap/rilogo.png" name="targetimage" border="2"></a>
<img src="http://www.the-rational-investor.com/images/OnTheMiningMap/<?echo("$map_version");?>"
BORDER="2"
usemap="#mymap">
<MAP NAME="mymap">
<area shape="rect" coords="<?echo("$rilogo_x_start");?>,<?echo("$rilogo_y_start");?>,<?echo("$rilogo_x_end");?>,<?echo("$rilogo_y_end");?>" onMouseover="doChanges(0)" href="http://www.therationalinvestor.ca/" rel="nofollow" target="_blank" Title="The Rational Investor" alt="The Rational Investor">
<area shape="rect" coords="<?echo("$autism_x_start");?>,<?echo("$autism_y_start");?>,<?echo("$autism_x_end");?>,<?echo("$autism_y_end");?>" onMouseover="doChanges(1)" href="http://www.autismbc.ca/" rel="nofollow" target="_blank" Title="Autism Society of BC" alt="Autism Society of British Columbia">
<area shape="rect" coords="<?echo("$britania_x_start");?>,<?echo("$britania_y_start");?>,<?echo("$britania_x_end");?>,<?echo("$britania_y_end");?>" onMouseover="doChanges(2)" href="http://www.britaniaminingmuseum.ca/" rel="nofollow" target="_blank" Title="Britannia Mining Museum" alt="Britannia Mining Museum">
<area shape="rect" coords="<?echo("$sable_x_start");?>,<?echo("$sable_y_start");?>,<?echo("$sable_x_end");?>,<?echo("$sable_y_end");?>" onMouseover="doChanges(3)" href="http://sableresources.com/" rel="nofollow" target="_blank" Title="Sable Resources - Shasta" alt="Sable Resources - Shasta">
<area shape="rect" coords="<?echo("$northgate_x_start");?>,<?echo("$northgate_y_start");?>,<?echo("$northgate_x_end");?>,<?echo("$northgate_y_end");?>" onMouseover="doChanges(4)" href="http://northgateexploration.com/Home/default.aspx" rel="nofollow" target="_blank" Title="Northgate Resources - Kemess South" alt="Northgate Resources - Kemess South">
<area shape="rect" coords="<?echo("$thompson_x_start");?>,<?echo("$thompson_y_start");?>,<?echo("$thompson_x_end");?>,<?echo("$thompson_y_end");?>" onMouseover="doChanges(5)" href="http://www.thompsoncreekmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Thompson Creek Metals - Endako" alt="Thompson Creek Metals - Endako">
<area shape="rect" coords="<?echo("$imperial_x_start");?>,<?echo("$imperial_y_start");?>,<?echo("$imperial_x_end");?>,<?echo("$imperial_y_end");?>" onMouseover="doChanges(6)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Huckleberry" alt="Imperial Metals - Huckleberry">
<area shape="rect" coords="<?echo("$westerncoal_x_start");?>,<?echo("$westerncoal_y_start");?>,<?echo("$westerncoal_x_end");?>,<?echo("$westerncoal_y_end");?>" onMouseover="doChanges(7)" href="http://www.westerncoal.com/" rel="nofollow" target="_blank" Title="Western Coal - Brule, Dillon, Perry Creek" alt="Western Coal - Brule, Dillon, Perry Creek">
<area shape="rect" coords="<?echo("$peaceriver_x_start");?>,<?echo("$peaceriver_y_start");?>,<?echo("$peaceriver_x_end");?>,<?echo("$peaceriver_y_end");?>" onMouseover="doChanges(8)" href="http://www.peacerivercoal.com/" rel="nofollow" target="_blank" Title="Peace River Coal" alt="Peace River Coal">
<area shape="rect" coords="<?echo("$teckcoal1_x_start");?>,<?echo("$teckcoal1_y_start");?>,<?echo("$teckcoal1_x_end");?>,<?echo("$teckcoal1_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Fording River" alt="Teck Coal Fording River">
<area shape="rect" coords="<?echo("$teckcoal2_x_start");?>,<?echo("$teckcoal2_y_start");?>,<?echo("$teckcoal2_x_end");?>,<?echo("$teckcoal2_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Greenhills" alt="Teck Coal Greenhills">
<area shape="rect" coords="<?echo("$teckcoal3_x_start");?>,<?echo("$teckcoal3_y_start");?>,<?echo("$teckcoal3_x_end");?>,<?echo("$teckcoal3_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Line Creek" alt="Teck Coal Line Creek">
<area shape="rect" coords="<?echo("$teckcoal4_x_start");?>,<?echo("$teckcoal4_y_start");?>,<?echo("$teckcoal4_x_end");?>,<?echo("$teckcoal4_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Elkview" alt="Teck Coal Elkview">
<area shape="rect" coords="<?echo("$teckcoal5_x_start");?>,<?echo("$teckcoal5_y_start");?>,<?echo("$teckcoal5_x_end");?>,<?echo("$teckcoal5_y_end");?>" onMouseover="doChanges(9)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck Coal Coal Mountain" alt="Teck Coal Coal Mountian">
<area shape="rect" coords="<?echo("$imperial2_x_start");?>,<?echo("$imperial2_y_start");?>,<?echo("$imperial2_x_end");?>,<?echo("$imperial2_y_end");?>" onMouseover="doChanges(10)" href="http://www.imperialmetals.com/s/Home.asp" rel="nofollow" target="_blank" Title="Imperial Metals - Mount Polley" alt="Imperial Metals - Mount Polley">
<area shape="rect" coords="<?echo("$teck_x_start");?>,<?echo("$teck_y_start");?>,<?echo("$teck_x_end");?>,<?echo("$teck_y_end");?>" onMouseover="doChanges(11)" href="http://www.teck.com/Generic.aspx?portalName=tc" rel="nofollow" target="_blank" Title="Teck - Huckleberry" alt="Teck - Huckleberry">
<area shape="rect" coords="<?echo("$taseko_x_start");?>,<?echo("$taseko_y_start");?>,<?echo("$taseko_x_end");?>,<?echo("$taseko_y_end");?>" onMouseover="doChanges(12)" href="http://www.tasekomines.com/tko/Home.asp" rel="nofollow" target="_blank" Title="Taseko - Gibralar" alt="Taseko - Gibralar">
<area shape="rect" coords="<?echo("$roca_x_start");?>,<?echo("$roca_y_start");?>,<?echo("$roca_x_end");?>,<?echo("$roca_y_end");?>" onMouseover="doChanges(13)" href="http://www.rocamines.com/s/Home.asp" rel="nofollow" target="_blank" Title="Roca - Max" alt="Roca - Max">
<area shape="rect" coords="<?echo("$breakwater_x_start");?>,<?echo("$breakwater_y_start");?>,<?echo("$breakwater_x_end");?>,<?echo("$breakwater_y_end");?>" onMouseover="doChanges(14)" href="http://www.breakwater.ca/" rel="nofollow" target="_blank" Title="Breakwater - Myra Falls" alt="Breakwater - Myra Falls">
<area shape="rect" coords="<?echo("$hillsborough_x_start");?>,<?echo("$hillsborough_y_start");?>,<?echo("$hillsborough_x_end");?>,<?echo("$hillsborough_y_end");?>" onMouseover="doChanges(15)" href="http://www.hillsboroughresources.com/" rel="nofollow" target="_blank" Title="Hillsborough - Quinsam" alt="Hillsborough - Quinsam">
</MAP>
</body>
My question is, how can I get three different images (company logo, weekly price chart and monthly price chart - all of which are in an image folder on my server) to change on this one mouseover event. I tried replicating the function three times and altering each function's name but that ended up screwing the whole thing up. Any thoughts/suggestions would be greatly appreciated, Brian Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image... Code: <script type="text/javascript">
function changeWalls(what, whatimg)
{
if(what != "none")
{
document.images[whatimg].src = what;
}
}
</script>
<select name="Walls" onchange="changeWalls(this.value,'walls')">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/WALLCC.png">Classic Cream</option>
<option value="images/WALLSG.png">Shale Grey</option>
<option value="images/WALLDO.png">Deep Ocean</option>
<option value="images/WALLSM.png">Surfmist</option>
</select>
then the images i want are multiples so i want to change 2 of these Code: <img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" /> The code below allows the user to hover over 1 object and it not only replaces the object but also shows an additional object between the buttons. It works great in Firefox, but does not in Internet Explorer. HELP webpage: http://www.isp.ucar.edu/ ------------ standard mouseover commands are used in index.php <CODE> <a href="http://www.tiimes.ucar.edu/beachon/" onMouseOver="imgOn('img1')" onMouseOut="imgOff('img1')"> <img src="images/buttons/button-beachon.gif" alt="BEACHON" width="181" height="74" border="0" id="img1" /></a> </CODE> ------------ <CODE> if (document.images) { img1on = new Image(); img1on.src = "images/buttons/button-beachon-on.gif"; img1off = new Image(); img1off.src = "images/buttons/button-beachon.gif"; img2on = new Image(); img2on.src = "images/buttons/button-bgs-on.gif"; img2off = new Image(); img2off.src = "images/buttons/button-bgs.gif"; img3on = new Image(); img3on.src = "images/buttons/button-iam-on.gif"; img3off = new Image(); img3off.src = "images/buttons/button-iam.gif"; img4on = new Image(); img4on.src = "images/buttons/button-nvia-on.gif"; img4off = new Image(); img4off.src = "images/buttons/button-nvia.gif"; img5on = new Image(); img5on.src = "images/buttons/button-utls-on.gif"; img5off = new Image(); img5off.src = "images/buttons/button-utls.gif"; img6on = new Image(); img6on.src = "images/buttons/button-water-on.gif"; img6off = new Image(); img6off.src = "images/buttons/button-water.gif"; img7on = new Image(); img7on.src = "images/buttons/button-exploratory-on.gif"; img7off = new Image(); img7off.src = "images/buttons/button-exploratory.gif"; // second image that does not appear in original button space img1ad = new Image(); img1ad.src = "images/buttons/beachon-overview-sm.gif"; img2ad = new Image(); img2ad.src = "images/buttons/bgs-overview-sm.gif"; img3ad = new Image(); img3ad.src = "images/buttons/iam-overview-sm.gif"; img4ad = new Image(); img4ad.src = "images/buttons/nvia-overview-sm.gif"; img5ad = new Image(); img5ad.src = "images/buttons/utls-overview-sm.gif"; img6ad = new Image(); img6ad.src = "images/buttons/water-overview-sm.gif"; img7ad = new Image(); img7ad.src = "images/buttons/exploratory-overview-sm.gif"; } { function imgOn(imgName) { if (document.images) { document[imgName].src = eval(imgName + "on.src"); document["holder"].src = eval(imgName + "ad.src"); } } } function imgOff(imgName) { if (document.images) { document[imgName].src = eval(imgName + "off.src"); document["holder"].src = "images/buttons/isp-overview-sm.gif"; } } </CODE> So this is my first thread and I am a noob at javascript so please forgive obvious mistakes. I am try to make images float across the screen horizontally. Ideally I would like them to come from both sides and be at different y positions. The problem I am having is that I can only seem to get one to move at a time. Another problem is that when they move off to the right of the screen it expands the viewable size of the site. So here's what I've come up with thus far. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
body {
background-color: #0CF;
}
</style>
<script language="javascript">
var x = 5; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1000; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("cloud").style.top = y+'px';
document.getElementById("cloud").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage()',100);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="backgroundgradient.png" onload="moveImage()">
<div id="cloud" class="movable">
<img src="cloud01.png" />
</div>
<script language="javascript">
var x = -100; //Starting Location - left
var y = 5; //Starting Location - top
var dest_x = 1500; //Ending Location - left
var dest_y = 5; //Ending Location - top
var interval = 1; //Move 10px every initialization
function moveImage01() {
//Keep on moving the image till the target is achieved
if(x<dest_x) x = x + interval;
if(y=dest_y) y = y + interval;
//Move the image to the new location
document.getElementById("plane").style.top = y+'px';
document.getElementById("plane").style.left = x+'px';
//if ((x+interval < dest_x) && (y+interval < dest_y)) {
//Keep on calling this function every 100 microsecond
// till the target location is reached
window.setTimeout('moveImage01()',10);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body background="web_layout/backgroundgradient.png" onload="moveImage01()">
<div id="plane" class="movable">
<img src="plane.png" />
</div>
</body>
</html>
Any help is greatly appreciated. Thanks Hello, I am trying to do an image swap when hovering over "TEXT" links. For instance, I would like to first have a "mainpic" in a div that would be replaced by either image 1,2 or 3 (depending on if you are hovering over"text link 1,2 or 3). I would use normal rollover "image" swaps, but would prefer to have the "trigger" to be "text" (for SEO reasons). I am just getting familiar with javascript, but do not even know where to begin! I have read multiple forum entries throught google, but could not find any where I could have "multiple" text links. I would so much appreciate it if anyone could please point me in a direction. Sincerely, Buffmin I am trying to toggle a button (button-top) to move 860px to the right when clicked, while a div panel (textbox1) with text slides down next to it. The panel toggles fine when the buttons (wrap or button-top) are clicked, but the button moves to the right, and then does not move back to its original position when the buttons are clicked the second time. I have tried so many different methods of coding this, but i have problems where the button keeps moving further to the right every time it is clicked. or when it does move back, it does it automatically (not on click) and suddenly disappears. Here is the code that I have ended up with so far. Code: $(function() {
$("#textbox1").hide();
$("#wrap").click(function() {
$("#button-top").animate({right: "860px"}, 2000);
$('#textbox1').animate({height: "toggle"}, 2000);
});
});
Hello. Can anyone please tell me what information in the second java script code needs to be changed to make a toggle expand in place. The toggles currently expand properly, but the second toggle, as well as the others, jump back up to the first toggle when expanded. The first toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> The second toggle: <script type="text/javascript">// <![CDATA[ function toggleView(layer_on, layer_off) { document.getElementById(layer_on).style.display = 'block'; document.getElementById(layer_off).style.display = 'none'; return; } // ]]></script> Here is the referenced page: http://sprintexperts.info/phones/# Thanks in advance! I'm not sure if this is a JS or CSS problem, but I figure I would start here. What is wrong with the "onload" function that makes it so that I can not initialize the class name? I get no errors and the toggleClass(IDS) function appears to work fine with similar logic tests. What I expect to happen is that the <blockquote id=...> class names be initialized to hide if and only if JS is available for the toggleClass function to work. Here is what I am doing... Code: <!DOC HTML>
<html>
<head>
<title> Toggle Class </title>
<script type="text/javascript">
//<![CDATA[
function toggleClass(IDS) {
var sel = document.getElementById(IDS); // alert(IDS+' : '+sel.className);
if (sel.className != 'hide') { sel.className = 'hide'; }
else { sel.className = 'show'; }
}
window.onload = function() {
var sel = document.getElementsByTagName('*');
for (var i=0; i<sel[i].length; ++i) {
if (sel[i].className == 'show') { sel[i].className = 'hide'; alert(sel[i].id); }
}
}
//]]>
</script>
<style type="text/css">
.show { display: block; }
.hide { display: none; }
li { list-style-type: none; }
#Schedule { margin:0px; padding:5px; }
#Projects { margin:0px; padding:5px; }
</style>
</head>
<body>
<a href="#" onclick="toggleClass('Schedule');return false"> Schedule </a>
<blockquote id="Schedule" class='show'>
<li>Monday:</li>
<li>Tuesday:</li>
<li>Wednesday:</li>
<li>Thursday:</li>
<li>Friday:</li>
</blockquote>
<br>
<a href="#" onclick="toggleClass('Projects');return false"> Projects </a>
<blockquote id="Projects" class='show'>
<li>Current</li>
<li>Past</li>
<li>Future</li>
<li>On-going</li>
</blockquote>
</body>
</html>
Hi all, looking for some help. I found this script that does almost everything i need. I have a form that has a small section of two radio buttons when you click on the first one i need a series of text boxes to open wrapped in a div box and that happens great, but when the other one is clicked i need them to go away, the whole div box. also the text boxes also have some hidden fields attached to them will not not pass to the shopping cart if the text boxes are disabled. here is what i have so far. placed in head Code: <SCRIPT LANGUAGE="JavaScript">
function toggle(chkbox, group) {
var visSetting = (chkbox.checked) ? "visible" : "hidden"
document.getElementById(group).style.visibility = visSetting
}</script>
part of the form having issues with Code: <span class="style30" style="text-align:center">Send directly to recipant:</span><input name="product3[]" type="radio" onclick="toggle(this, 'shipGroup');" value="{br}{b}SEND CERT DIRECTLY TO RECIPANT---{/b}"/>
<br/>
<center>
<span class="style30">Send to me to give to the recipant:</span>
<input name="product3[]" type="radio" value="{br}{b}SEND CERT TO ME TO GIVE TO RECIPANT---{/b}" />
</center>
<input type="hidden" name="price3" value=".00" />
<input type="hidden" name="qty3" value="1" />
<input type="hidden" name="noqty3" value="3" />
<div id="shipGroup"><table width="616">
<tr>
<td width="125" style="text-align:left">
<span class="style30">First Name</span>
<input type="hidden" name="product3[]1" value="{br}FIRST NAME:" /></td>
<td width="151"><input type="text" name="product3[]2" value=""/></td>
<td width="147" style="text-align:right"><span class="style30" >Last Name</span>
<input type="hidden" name="product3[]3" value="{br}LAST NAME:" /></td>
<td width="173" style="text-align:left"><input type="text" name="product3[]4" value=""/></td></tr>
<tr><td colspan="3" style="text-align:left"><span class="style30">Address</span>
<input type="hidden" name="product3[]5" value="{br}ADDRESS:" />
<input type="text" name="product3[]6" value="" size="30"/></td>
<td> </td>
</tr>
<tr><td colspan="2" style="text-align:left"><span class="style30">City</span>
<input type="hidden" name="product3[]7" value="{br}CITY:" /><input type="text" name="product3[]8" value=""/></td>
<td><span class="style30">State</span>
<input type="hidden" name="product3[]9" value="{br}STATE:" />
<input type="text" name="product3[]10" value="" size="10"/></td>
<td><span class="style30">Zip code</span>
<input type="hidden" name="product3[]11" value="{br}ZIP CODE:" />
<input type="text" name="product3[]12" value="" size="5"/></td></tr></table>
</div>
please anyone with help will be great I had some help last week with a brands a to z list which shows a div containing list of brands starting with the relevant letter onclick. It works pretty well with one flaw. The brand links within the div seem to activate the toggle function. My wish is that the layer is shown when a letter is clicked but then hides on div onMouseOut so that a different letter can be selected. Here is by code; Javascript; Code: function toggle_visibility(o,id) {
var obj = document.getElementById(id);
obj.style.display=(obj.style.display == 'block')?'none':'block';
if (obj.style.display!='none') {
obj.style.left=zxcPos(o)[0]+20+'px';
obj.style.top=zxcPos(o)[1]+20+'px';}
}
function zxcPos(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
}
Here is a sample of my a to z table; Code: <table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename20');">U</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename21');">V</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename22');">W</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename23');">X</a></td>
</tr>
<tr>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename24');">Y</a></td>
<td align="center" class="LN-Brands-Alphabox"><a href="#" onclick="toggle_visibility(this,'uniquename25');">Z</a></td>
</tr></table>
And here is an example of the Brand name div ; Code: <div id="uniquename21" onMouseOut="toggle_visibility('null','uniquename21');" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px;">
<a href="Manufacturer-view.asp?ManID=43">VPX</a><br>
<a href="Manufacturer-view.asp?ManID=44">Vyomax</a>
</div>
You can view the site on my test page; http://www.dp-development.co.uk/ProteinStop/site/ (Brand menu on the left nav) Thank you for any help you can give I forgot how to do this. I did this a long time ago but have deleted the example. I want to absolute position 11 scrolling div tags of the same dimensions with the same top and left positions. In other words, on top of each other. This is easy. What I can't remember how to do is trigger them so one shows up and the others are hidden. Code: <style>
.one {
position:absolute;
top:200px;
left:0px;
background:skyblue;
width:250px;
height:250px;
}
.two {
position:absolute;
top:200px;
left:0px;
background:aqua;
width:250px;
height:250px;
}
</style>
<input type="button" onClick="" value="one">
<input type="button" onClick="" value="two">
<div class="one">one</div>
<div class="two">two</div>
Hi there! I would REALLY appreciate any help! I've got a script that toggles the visibility of a div on "dashboard.html": Code: $(document).ready(function(){
$("#add_networks_wrapper, .remove_box").hide();
$(".toggle_add_networks").show();
$('.toggle_add_networks').click(function(){
$("#add_networks_wrapper, .remove_box").slideToggle();
});
});
On "dashboard.html" it works great. The div "add_networks_wrapper" is hidden until I click the link that toggles it. What I need is a link from a different html page (say "account.html" or whatever) to open "dashboard.html" with the hidden div's visible. Any help would be very appreciated! Hey there, I'm using the "toggle" method to show/hide a piece of a form. I am trying to update a hidden input field to set a flag whether or not that area should be validated. The element toggle works fine, but I can't get the form value to update the way I would like... Here's what I have, the initial change (from 0 to 1) works, but it doesn't ever change back to 0 when clicked again... Code:
$(document).ready(function() {
$("#change-pwd-button").click(function(event) {
event.preventDefault();
$("#password-table").toggle("slow");
if ($("#changePassFlag").val("0")) {
$("#changePassFlag").val("1");
} else {
$("#changePassFlag").val("0");
}
});
});
Any help would be appreciated. Thanks, TE Hi, I'm using the following code to toggle checkbox checked and disabled attributes. Code: var f = false;
function tick(group) {
if (!f) {
for (var i=0, len = group.length; i < len; i++) {
group[i].disabled = true;
group[i].checked = true;
}
}
else {
for (var i=0, len = group.length; i < len; i++) {
group[i].disabled = false;
group[i].checked = false;
}
}
f == true? f=false:f=true;
}
The checkbox doing the js call uses onclick="tick(country)" and the checkboxes that I want to toggle all have the same id e.g. Code: <label><input type='checkbox' name='uk[]' id='country' value='England' />England</label><br /> <label><input type='checkbox' name='uk[]' id='country' value='Scotland' />Scotland</label><br /> This all works correctly but does not validate. I need to use unique id's for each name. The easiest way (as each checkbox html is generated by php) is to append the value to the id i.e. Code: <label><input type='checkbox' name='uk[]' id='countryEngland' value='England' />England</label><br /> <label><input type='checkbox' name='uk[]' id='countryScotland' value='Scotland' />Scotland</label><br /> How can I modify the javascript function factor this in i.e. toggle where id contains country? |
|||||||