JavaScript - Multiple Images Moving Different Directions

Hi,
I have a table with FROM and TO columns and a column with MAP/DIRECTIONS link. When a user clicks on the link, it should display Map and Directions on the iframe on the same page. How can I achieve this using Google map and directions API?

Thanks

I'm sorry if this is in the wrong section...

I am not sure how to do it...

Here is the coding:
Code:

function displayTitle(name, x, y){
return name + " <a href='#' onClick='showDirectionsDialog(\""+name+"\", "+x+", "+y+")'><img src='images/direction.png' alt='Get driving directions'/></a>";
}

function showDirectionsDialog(name, x, y){
var d=dijit.byId("dialogDirections");

d.set("title", "Get directions to \""+name+"\"");

document.getElementById("txtToX").value=x;
document.getElementById("txtToY").value=y;

d.show();
}

function getDirections(){
var frmX=document.getElementById("txtFrmX").value;
var frmY=document.getElementById("txtFrmY").value;
var toX=document.getElementById("txtToX").value;
var toY=document.getElementById("txtToY").value;

var routeData = new Route;
routeData.routeStops = frmX+","+frmY+";"+toX+","+toY;
routeData.routeMode = "DRIVE";
routeData.avoidERP=0;
routeData.routeOption = "Shortest"; 
routeData.GetRoute(showDirections);
}

function showDirections(routeResults){
if (routeResults.results=="No results"){
alert("No directions found, please try other location.");
return;
}

}

Here is the coding I have now:
Code:

function getDirections() {

var routeData = new Route;
routeData.routeStops = document.getElementById('txtTheme').value;
routeData.routeMode = document.getElementById('txtOtptFlds').value;
routeData.avoidERP = document.getElementById('txtExtent').value;
routeData.routeOption = "Shortest"; 
routeData.GetRoute(showRouteData)
}

function showRouteData(routeResults)
{
if (routeResults.results=="No results"){
alert("No Route found, please try other location.")
return
}
else if (routeResults.results=="Stops more than nine"){
alert("Number of stops exceed than nine");
return;
}
directions = routeResults.results.directions[0];

directionFeatures = directions.features;

var routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(4);

var mergedGeometry = new esri.geometry.Polyline()

mergedGeometry.addPath(routeResults.results.routes.features[0].geometry.paths[0])
OneMap.map.graphics.clear();
OneMap.map.graphics.add(new esri.Graphic(mergedGeometry, routeSymbol)); 
//Display the total time and distance of the route
document.getElementById("results").innerHTML = "<br /> &nbsp; Total distance: " + directions.summary.totalLength + "<br /> &nbsp; Total time: " + directions.summary.totalTime;

//List the directions and create hyperlinks for each route segment
for (var i=0;i<directions.features.length;i++)
{
var feature=directions.features[i]
document.getElementById("results").innerHTML= document.getElementById("results").innerHTML + '<br><u>' + parseInt(parseInt(i)+1) + ". " + feature.attributes.text + " (" + feature.attributes.length + ", " + feature.attributes.time + ")</u>" 

}
}

I am not sure how to integrate my codings into the other codings.

There is a name of the place (lets say London) and a clickable icon by the side. When I click the icon, a dojo toolkit dialog box appear for me to enter my location (the other place, London, will be displayed in the dialog box) Click "Go" to get the directions...

I wish to have the directions also placed in a dialog box too...

Hi,
I've had this idea lately that I have a button that when I hover it, drop down menus come out from the left, the right, and below the button. Would this be doable in any way?

Thank you.

Greetings,

I have a GMAP2 setup on my website that gives driving directions from Point A to Point B. I want to add functionality that allows a user to alter the directions once the polyline has already been plotted.

Working Example:

Google Driving Directions

My Driving Directions:

Green Traffic Driving Directions

What javascript do I need to tweak to get the line to be draggable?

Thanks in advance for any information and / or assistance.

Sincerely,
Travis Walters

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

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.

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

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

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>

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

What is wrong with my code?

I am trying to move a div and it wont work at all.

Also my little <a> fix is really sloppy. Could I have some help with how I should fix that too?

Thanks!

Code:

<html>
<head>
<script type="text/javascript">
var obj = document.getElementById("object");
var x = parseInt(obj.style.left);
var y = parseInt(obj.style.top);
function right(){
	obj.style.left = "" + (x + 1) + "";
}
function left(){
	
}

</script>
</head>
<body>
<a href="" onclick="right();">
<div id="container" style="position:absolute; top:100px; left:50%; margin-left:-400px; width:800px; height:600px; border:3px solid #808080;">
<div id="object" style="position:relative; top:559; left:379; background-color:#CCCCCC; width:40px; height:40px; border:1px solid #696969;">
</div>
</div>
</a>
</body>
</html>

Hello,
I'm newbie in javascript, but i want to make an moving image.

In time it should change to other image with other button. Also it could be changed by user. The change should be dynamic like moving from left to right. ^^

Any advices, tutorial links or smthing.. Thx

Hi,
I'm noob , but i have nice idea i want to do it but i can't ..
i tried many ways to do it .. but didn't work any of them ..

the idea is move the foot to room no.1 .. but i want to see the foot moving on the red line to the room

like this pic :