Learn VBA & Macros in 1 Week!

JavaScript - Selection And Changing Image Problem

Full Excel VBA Course - Beginner to Expert

Selection And Changing Image Problem	View Content

I have problem ,the code cannot operate. I would like your opinion.The user must select in dropdown list having one display of image every time.Thanks
js code
Code:

var sel = document.getElementById("sw");
function f1(){
   var imgs = ['chart1.cgi', 'chart2.cgi', 'chart3.cgi', 'chart4.cgi'];
   var im = document.getElementById("pic");
   im.src = imgs[this.selectedIndex]; 
}

html code
Code:

<img id="pic" src="chart1.cgi" />

<select name="sw" id="sw" onchange = "f1()" >
   <option value="s1">what</option>
   <option value="s2">whatever 2</option>
   <option value="s3">whatever 3</option>
   <option value="s4">whatever 4</option>
</select>

Full Excel VBA Course - Beginner to Expert

Changing Text On Selection

Similar Tutorials

View Content

I am trying to change text in one cell of a table when a user selects an item from a select menu. The data for the select menu is being pulled from a database (which works fine). The select menu is displayed as expected; however the text in the div tag always comes up as "undefined"

The code below is part of a PHP script (thus \" instead of ")
I would like to employ a method that does not require extra Javascript in the <head> section as in this instance the code is being output from an include that is called long after the <head> area of the document is processed.

Here is what I have
Code:

<tr><td><select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">
<option selected=\"selected\" value=\"\">Select Race</option>\n";
$sql = mysql_query("SELECT * FROM races");$i=1;
while ($row = mysql_fetch_array($sql)){
	$output .= "<option value=\"$i\" ExtraInfo=\"{$row['des']}\">{$row['race']}</option>\n";
	$i++;
}
$output .= "</select></td>
<td><div id=\"ExtraInfo\">Select Race</div></td></tr>

Any help will be greatly appreciated.

I found a solution to my problem:
by replacing:
Code:

<select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].extrainfo\">

with this:
Code:

<select name=\"race\" onchange=\"document.getElementById('ExtraInfo').firstChild.nodeValue = this.options[this.selectedIndex].getAttribute('extrainfo')\">

Problem Changing Div Background Image

Similar Tutorials

View Content

Hello all,

I want to set dynamically a div's background image when the page loads, so I have my code like so:

javascript code:

window.onload = init;

function init(){
$(document).ready(function(){
$('#button1').css('background', 'url(../imagenes/buttonNormal.jpg)');
$('#pg1').css('color', 'black');
$('#pg1').css('font-weight', 'normal');
});
}

My CSS stylesheet is like so:

#buttonsWrapper {
position:relative;
margin 50px 0px 0px 0px;
}

.buttons {
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:17px;
font-weight:bold;
color:#FFF;
}

#button1 { margin: 31px 0px 0px 0px; }
#button2 { margin: -43px 0px 0px 195px; }
#button3 { margin: -43px 0px 0px 390px; }
#button4 { margin: -43px 0px 0px 585px; }
#button5 { margin: -43px 0px 0px 780px; }

#button1, #button2, #button3, #button4, #button5 {
width:172px;
height:33px; /* 33px */
padding-top:10px;
text-align:center;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover {
background-image:url(../imagenes/buttonNormal.jpg);
background-repeat:no-repeat;
background-position:top;
}

My HTML sourcecode is like so:

<div id="buttonsWrapper">
<div id="button1"><a href="#" id="pg1" class="buttons">link1</a></div>
<div id="button2"><a href="#" id="pg2" class="buttons">link2</a></div>
<div id="button3"><a href="#" id="pg3" class="buttons">link3</a></div>
<div id="button4"><a href="#" id="pg4" class="buttons">link4</a></div>
<div id="button5"><a href="#" id="pg5" class="buttons">link5</a></div>
</div>

The thing is that the background image that I'm calling (../imagenes/buttonNormal.jpg) is not loading for some reason... what am I doing wrong?

Thank you so much in advance...

Changing The Background Picture Depending On A Drop Down Field Selection

Similar Tutorials

View Content

Hi coders,

I need to achieve two things upon making a selection from a drop down field:

1) Changing the background picture of a cell.
2) Changing the size of a uploaded foreground picture within the same cell.

Code:

<select name=ADDITIONALINFO> 
<option value="25 x 25">25 x 25</option> 
<option value="35 x 35">35 x 35</option> 
<option value="45 x 45">45 x 45</option> 
<option value="55 x 55">55 x 55</option> 
</select>

Any guidance how to achieve this is appreciated.

Changing Html Select Options Based On Other Selection With Javascript And Php

Similar Tutorials

View Content

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.

Changing Image And Image Map Crashes Ie (not Firefox)!

Similar Tutorials

View Content

I came across your forums here and it looked like a great place to get some help, and help is exactly what I need!

I have been struggling with this javascript that changes an image and its corresponding useMap.

For reference:
- All images are the same size and located in the same directory, except the main map image
- All images are preloaded (I did this just in case it was an image problem)
- The page works fine in Firefox, and fine in IE until it crashes
- http://www.forthecode.com/imagemap/untitled.htm

The Problem:
- When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds.
- This even happens in a completely blank page (no other content)

Exceptions:
- Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem)
- Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up!

The Javascript function itself:
Code:

<script language="Javascript">
	function changemap(vari){
		var vari;
		var stoptime;
		if(vari=="regionview"){
			document.regionmap.src = "/images/branchmap2.jpg";
			stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
			}
		else{
			document.regionmap.src = "/images/states/" + vari + ".jpg";
			stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
			}
	}
</script>

The image tag and image maps:
Code:

<img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0"> 
<map name="Map">
  <area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana"> 
  <area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
  <area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
  <area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');"  alt="Mississippi" title="Mississippi">
  <area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');"  alt="Arkansas" title="Arkansas">
  <area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');"   alt="Ohio" title="Ohio">
  <area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');"   alt="Missouri" title="Missouri">
  <area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');"   alt="Illonois" title="Illonois">
  <area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');"   alt="Tennessee" title="Tennessee">
  </map>
<map name="arkansas"> 
  <area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
  <area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
  <area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="mississippi"> 
    <area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
    <area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
    <area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
    <area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
    <area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
    <area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
    <area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
    <area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="missouri"> 
    <area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
    <area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
    <area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
    <area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
    <area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
    <area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
    <area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
    <area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
    <area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
    <area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="kentucky"> 
    <area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
    <area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
    <area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
    <area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
    <area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
    <area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
    <area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
    <area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
    <area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
    <area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="indiana"> 
    <area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
    <area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
    <area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
    <area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
    <area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
    <area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
    <area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
    <area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
    <area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
    <area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
    <area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
    <area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
    <area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
    <area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="illonois"> 
    <area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
    <area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
    <area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
    <area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
    <area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
    <area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="tennessee"> 
    <area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
    <area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
    <area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
    <area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>
<map name="ohio"> 
    <area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
    <area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
    <area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
    <area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
	<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
  </map>

This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me.

Thanks in advance!

Javascript Dropdown Change Background Image Depending On Selection

Similar Tutorials

View Content

Hello.

The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text.

Here is the code.

Code:

<html>
<head>
<style type='text/css'>

#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>

<script type='text/javascript'>
function div_bg(team){
	document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";	
}
</script>

</head>

<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>

Thanks in advance!!

Image And Link Changing

Similar Tutorials

View Content

First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link).

I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked.

Help please...

Code:

<script type="text/javascript">
		<!--Hide from incompatible browsers
		/* <![CDATA[ */
				
		function changeText()
		{
			document.getElementById('link').innerHTML = 'View Smaller Image';
			return false;		
		}
		
		function changeImage()
		{			
			var newImage = new Image();
			newImage.src = "images/cottage_large.jpg";
			document.getElementById('thumbnail').src = newImage.src;	
			return false; 											
		}
				
		/**/
		/* ]]> */
		
		// Stop hiding from incompatible browsers -->
	</script>

</head>

<body>
	
	<h3>Real Estate</h3>
		 
	<p><img src="images/cottage_small.jpg" id="thumbnail"></p>
    
	<a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a>
	

</body>

</html>

Changing Image Src With Javascript

Similar Tutorials

View Content

Hello All.

I'm trying to create a file upload page with pre-uploading preview, and using JS to change the images src upon selecting a local file. this works great, but unfortunatelly only for some image files, even though files were taken by the same camera,the same size, and created on the same date. I can't figure out for the life of me what is going on. The Code :

<script>
function changeImage(newSrc)

var str = newSrc.toLowerCase();
cImg=document.getElementById("chngImg");
cImg.src=str;

</script>

<HTML>
<BODY BGCOLOR="#FFFFFF">
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="UploadScript1.asp" rel="nofollow" target="newWnd">
File 1:<INPUT TYPE=FILE NAME="FILE1" onchange="changeImage(this.value);">
<INPUT TYPE=SUBMIT VALUE="Upload!">
</FORM>

<div><img src="oren1.jpg" id="chngImg"></div>

</BODY>

</HTML>

Best Regards
Oren Pildus

Changing Background Image.

Similar Tutorials

View Content

After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly.

Code:

<html>
<title>Welcome :D</title>
<head>

    <style type="text/css">
	body {
		background-color:E6E6E6;	
	}
    </style>
	<script type="text/javascript">
	//Pre loading images to be used with check boxes.
	function preLoad(){
	Eyeball= new Image(400,200)
	Eyeball.src = "Eyeball.jpg"

	Smileys = new Image(400,200)
	Smileys.src = "Smileys.gif"

	goodAfternoon = new Image(400,200)
	goodAfternoon.src = "Good Afternoon.gif"
	
	goodAfternoonFinal = new Image(400,200)
	goodAfternoonFinal.src = "Good Afternoon.gif"
	
	zombies=new Image()
	zombies.src = "Zombies.jpg"
	
	}
	
	function validate(){
		if(document.getElementById("cb1").checked){
		document.goodAfternoon.src=Eyeball.src;
		}else{
		document.goodAfternoon.src=Smileys.src;
		}
	}
	function reset(){
		cb1.checked=false;
		document.goodAfternoon.src=goodAfternoonFinal.src; 
	}
	
	var i=0;
	function myalert(){
		i++
		if(i == 1){
		alert("I dare you to press me again....");
		}
		if(i == 2){
		
		}
		if(i == 3){
		i = 0;
		document.body.background = "zombies.src";
		}
	}
	
</script>
</head>
<body onLoad="javascript:preLoad()">	

This is where I learn a lot of my coding for Java, JavaScript, and HTML
	<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
	
</br>

 "Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
 <img src="Good Afternoon.gif" name="goodAfternoon">
 <input type="button" id="cb2" value="RESET" onClick="reset()"/>

	
	</BR></br></br></br></br>
    Hello, thank you for visiting my webpage I hope you like it.

  <input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>

Conditional Image Changing

Similar Tutorials

View Content

Hi everyone,

So I know enough to make an image change when you click on something, but not enough to do what I want to do.

Code:

<img name="ImageState" src="Image1.jpg" alt="Image">
<A HREF="javascript:void(0)" onclick="ImageState.src='Image1.jpg'">Link 1</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image2.jpg'">Link 2</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image3.jpg'">Link 3</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image4.jpg'">Link 4</A>
<A HREF="javascript:void(0)" onclick="ImageState.src='Image5.jpg'">Link 5</A>

The problem is that I want the images to only advance in the proper order. For example, if "Image2.jpg" is currently displayed, I want to make it so that only clicking on "Link 3" will advance it to "Image3.jpg" while the other links are still there but do nothing if you click on them. Can anyone tell me how to do this please?

Help In Changing Image According To Angle (javascript)

Similar Tutorials

View Content

Hi all,
I am currently working on a boids related project which involves a few fishes swimming around.(decided to start on only 1 fish 1st) Now I just want to make the fish image change accordingly to the angle that it is swimming towards by calculating the angle, assigning a position to it, and load its corresponding image. But its just not working. The fish just move up and down instead of what I programme to move all around. The image doesnt change either. Please help! Thanks!

Here is my code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Moving fish, in class 2012-02-08</title>


<!-- include the Sprites library -->
<script src="Sprites3.js"></script>

<script>

var left = 40, top = 40, w = 400, h  =300;//the frame
var tick = 10; //ms between redraws

//position and velocity of moving ball
var x = 40; //x position of ball
var y = 40; //y position of ball
var vx = 1; //x component of velocity
var vy = 2; //y component of velocity
var dt = 1; //simulation time step
var anglePosition=1;
//the moving image
var d = 30; //diameter of ball [w and h of sprite]

var fish = new Sprite("goldfish/fish" + anglePosition + ".png", d, d);


function moveOneStep(){
	x = x + vx*dt; //new x position
	y = y + vy*dt; //new y position
	
	if (x < 0) {//hit left rail
		x = -x;
		vx = -vx;
	}
	
	if (y < 0){//hit bot rail
		y = -y;
		vy = -vy;
	}
	
	if (x > (w-d)){//hit right rail
		x = 2*(w-d) - x;
		vx = - vx;
	}
	
	if (y > (h-d)){//hit top rail
		y = 2*(h-d) - y;
		vy = - vy;
	}
	
	calculateAngle(vx,vy);

	fish.redraw("goldfish/fish" + anglePosition + ".png", x, y); 
	
}//moveOneStep

//cal angle

function calculateAngle(vx,vy)
{	
	var s = Math.sqrt(vx*vx + vy*vy);
	var angle = Math.asin(vy/s) * (180/Math.PI);
	
	if(vx > 0)
	{	
		angle = 90 - (angle);
	}
	else 
	{	
		angle = 270 + (angle);
	}

	anglePosition = Math.round((((angle/360)*16)*1)/1); //16 positions
	
	return anglePosition;

}//end of function



function init(){
	
	initFrame(left, top, w, h, "#ccc");
	
	fish.draw(x, y);
	
	window.setInterval("moveOneStep()", tick);
	

}//init

</script>
</head>

<body onload="init()">

</body>
</html>

Changing The Alignment Of Image Which Is Under Iframe

Similar Tutorials

View Content

I would like to change the alignment of an image which currently under div which is under iframe. the page which is called under iframe is readymade html from some other site. I dont have any control on that HTML page which is under iframe. Please tell me how to align image under iframe.

Changing Background Image With A Button

Similar Tutorials

View Content

I am trying to make a button that would change the background image whenever somebody clicks it.

I have tried something along the lines of this:

Quote:
<input type="button"
value="Pattern1"
onClick="background-image: url(background.png);background-repeat: no-repeat;">
and,

Quote:
<input type="button"
value="Pattern2"
onClick="background: url(background.png);background-repeat: no-repeat;">
as you can see, I am a beginner at coding in general so any help is appreciated.

My assumption to why it doesn't work is that I am combining javascript with CSS, but I am most likely wrong.

Changing An Image Daily For A Month

Similar Tutorials

View Content

Greetings. I am trying to create an "image of the day" for a site where the image will change automatically every 24 hours. Currently, I have 30 images in a folder named "petday" (no quotes) and I tried the following code (found in this forum) but I cannot get it to work. Any help or suggestions would be greatly appreciated. On a side note, I am very new to JavaScript and I know there is an easier way to write this but I am not real clear on how to do it. I have been reading the lessons found at W3 schools and I think I can use a switch statement? Is that correct?

Code:

<SCRIPT Language="JavaScript">

var now = new Date();
var dd = now.getDate();

if (dd==1)
document.write('<img src="petday/image1.jpg">');
else if (dd==2)
document.write('<img src="petday/image2.jpg">');
else if (dd==3)
document.write('<img src="petday/image3.jpg">');
else if (dd==4)
document.write('<img src="petday/image4.jpg">');
else if (dd==5)
document.write('<img src="petday/image5.jpg">');
else if (dd==6)
document.write('<img src="petday/image6.jpg">');
else if (dd==7)
document.write('<img src="petday/image7.jpg">');
else if (dd==8)
document.write('<img src="petday/image8.jpg">');
else if (dd==9)
document.write('<img src="petday/image9.jpg">');
else if (dd==10)
document.write('<img src="petday/image10.jpg">');
else if (dd==11)
document.write('<img src="petday/image11.jpg">');
else if (dd==12)
document.write('<img src="petday/image12.jpg">');
else if (dd==13)
document.write('<img src="petday/image13.jpg">');
else if (dd==14)
document.write('<img src="petday/image14.jpg">');
else if (dd==15)
document.write('<img src="petday/image15.jpg">');
else if (dd==16)
document.write('<img src="petday/image16.jpg">');
else if (dd==17)
document.write('<img src="petday/image17.jpg">');
else if (dd==18)
document.write('<img src="petday/image18.jpg">');
else if (dd==19)
document.write('<img src="petday/image19.jpg">');
else if (dd==20)
document.write('<img src="petday/image20.jpg">');
else if (dd==21)
document.write('<img src="petday/image21.jpg">');
else if (dd==22)
document.write('<img src="petday/image22.jpg">');
else if (dd==23)
document.write('<img src="petday/image23.jpg">');
else if (dd==24)
document.write('<img src="petday/image24.jpg">');
else if (dd==25)
document.write('<img src="petday/image25.jpg">');
else if (dd==26)
document.write('<img src="petday/image26.jpg">');
else if (dd==27)
document.write('<img src="petday/image27.jpg">');
else if (dd==28)
document.write('<img src="petday/image28.jpg">');
else if (dd==29)
document.write('<img src="petday/image29.jpg">');
else if (dd==30)
document.write('<img src="petday/image30.jpg">');

</SCRIPT>

Changing Background Image On Hover

Similar Tutorials

View Content

Hey,

I want javascript to change the background image on hover.

This is my javascript:
Code:

function navOver(obj){
	var imgUrl = 'url(images/' + obj.id + '.hover.png) center no-repeat';
	obj.style.background='imgUrl';
}

function navOut(obj){
	var imgUrl = 'url(images/' + obj.id + '.png) center no-repeat';
	obj.style.background='imgUrl';
}

and this is the HTML:
Code:

<li id="home" onmouseover="navOver(this)" onmouseout="navOut(this)"></li>

This doesn't work, can anyone help me and say me what to do?

Href Changing Depending On What Image

Similar Tutorials

View Content

hello
i have this code that tags between three images in an certain amount of time
and this works fine
Code:

<script language = "Javascript">
<?php $count_im=1;
 $req=mysql_query("select * from banner");
	while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"
<?php $count_im++;
}?>
</script>

Code:

<div class="banner">
	<p class="banner_image">
		<img src="banner/12.jpg" name="slide" width="290px">
		<script>
			<!--
			//variable that will increment through the images
			var step=1
			function slideit(){
			//if browser does not support the image object, exit.
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			if (step<3)
			step++
			else
			step=1
			//call function "slideit()" every ... seconds
			setTimeout("slideit()",10000)
			}
			slideit()
			//-->
		</script>
	</p>
</div>

and i want it also to tag between hrefs too, so tried the following but didnt work
Code:

<?php $count_im=1;
 $req=mysql_query("select * from banner");
	while ($res=mysql_fetch_array($req)){ ?>
var image<?php echo $count_im; ?> =new Image()
image<?php echo $count_im; ?>.src="<?php echo $res["banner"]; ?>"

var link<?php echo $count_im; ?> =new String()
link<?php echo $count_im; ?>.href="<?php echo $res["banner_title"]; ?>"

<?php $count_im++;
}?>

Code:

<div class="banner">
	<p class="banner_image">
		<a href="" rel="nofollow" target="_blank" name="links">
		<img src="banner/12.12" name="slide" width="290px"></a>
		<script>
			<!--
			//variable that will increment through the images
			var step=1
			function slideit(){
			//if browser does not support the image object, exit.
			if (!document.images)
			return
			document.images.slide.src=eval("image"+step+".src")
			document.a.links.href=eval("link"+step+".src")
			if (step<3)
			step++
			else
			step=1
			//call function "slideit()" every ... seconds
			setTimeout("slideit()",10000)
			}
			slideit()
			//-->
		</script>
	</p>
</div>

anyone can help???

Rollover And Changing Image Src With An Onclick Event

Similar Tutorials

View Content

Hi

I am trying to stop a preloaded images used in a rollover. The images are linked to a tab navigation system, that open on the same page.

if(document.images){
var image_array = new Array();
// path to the directory with images
var path = './images/food-drink/food/';
// enumeration of the "active" images
image_array[0] = path + "starters_r.png";
image_array[1] = path + "mains_r.png";
image_array[2] = path + "desserts_r.png";
image_array[3] = path + "childrens_r.png";
image_array[4] = path + "sandwiches_r.png";
image_array[5] = path + "meal_r.png";
var preload_image = new Array ();
for(var i=0; i<image_array.length; i++){
preload_image[i]= new Image();
preload_image[i].src = image_array[i];
}
}

function rollover(name, filename){
var fullpath = './images/food-drink/food/' + filename;
document.images[name].src = fullpath;
}

I am trying to change the image with another one, which will change back when a different image is clicked.

The problem seems to be that the tab navigation code is disagreeing with other code I have tried. The tab code looks like this and works fine until I add another code with document.getElementById() to the onClick event.

function swichtabs(wert) {
if (wert=='1'){ /*menu starters tab*/
document.getElementById('tabStarters').className='tab1 tabactive';
document.getElementById('tabMains').className='tab2';
document.getElementById('tabDesserts').className='tab3';
document.getElementById('tabChildrens').className='tab4';
document.getElementById('tabSandwiches').className='tab5';
document.getElementById('tabMeals').className='tab6';
}else if (wert=='2'){
etc...

The html code for the image is:

<a href="#starters"
onmouseout="rollover('btnStarters','starters.png')"
onmouseover="rollover('btnStarters','starters_r.png')"
onClick="this.onMouseOver=null;this.onMouseOut=null;
blendon('starters');
blendoff('mains');etc...;
swichtabs('1');" onclick="return false;" title="Starters"
id="tabStarters">
<img src="./images/food-drink/food/starters.png" name="btnStarters" width="129" height="30" border="0" />
</a>

I would be grateful if you could point me in the right direction.

Changing Image By Selecting Drop Down Menu

Similar Tutorials

View Content

I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down?

Kathy

Need Help With Changing Image On Link Mouseover Script

Similar Tutorials

View Content

Hi there,

I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links.

I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated.

In the <head> section i have this:

<script type="text/javascript">

img1 = new Image();
img1.src = "images/party/party.jpg";

img2 = new Image();
img2.src = "images/party/icecream.jpg";

img3 = new Image();
img3.src = "images/party/juice.jpg";

img4 = new Image();
img4.src = "images/party/videogames.jpg";

function change(num){

document.images["linkpic"].src = "img" + num
}

</script>

</head>

In the <body> i have:

That's my default image
<table>
<tr>
<td width="100">
<img src="images/party/balloon1.jpg" name="linkpic">
</td>
<td width="260" valign="top" align="left">
<table>
<tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr>
<tr><td><a href="Party2.html" onmouseover="change('2')">Icecream
</a></td></tr>
<tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr>
<tr><td><a href="Party4.html" onmouseover="change('4')">Video Games
</a></td></tr>
</table>
</tr>
</table>
</body>

I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on.
Any hints and help are appreciated!

Thanks!

How Do You Change The Image Upon Changing The Options In Select Drop Down Box?

Similar Tutorials

View Content

all i have to do is the image to change automatically based on the option you selected from the drop down list.
here is the code, any help is appreciable. thanks in advance.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
height:95px;
width:95px;
display:block;
margin-top:10px;
}
#caption{
font-family:Verdana,tahoma,arial;
font-size:8pt;
text-align:left;
display:block;
width:250px;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var caption=['Default Image Caption',
'begonia',
'daffodils',
'mixture',
'natural',
'purple',
'red flower',
'sunflower',
'tulip',
'two flowers'], // This will be your images caption
bp='..\images', //base url of your images
imgnum=9, //Number of your images. This should match on your comboboxes options.
thumb=document.getElementById('thumb'), //id of your image that will be changing
description=document.getElementById('caption'), //id of your caption
combobox=document.getElementById('selection'); // id of your combobox.

combobox.onchange=function()
{
thumb.src=bp+'Picture'+this.value+'.jpg';
description.innerHTML=caption[this.value];
}
}
</script>
</head>
<body>
<label>Please Change the pictu </label>
<select id="selection">
<option>Change Picture</option>
<option value="1">begonia</option>
<option value="2">daffodils</option>
<option value="3">mixture</option>
<option value="4">natural</option>
<option value="5">purple</option>
<option value="6">red flower</option>
<option value="7">sunflower</option>
<option value="8">tulip</option>
<option value="9">two flowers</option>
</select>
<br>
<img src="..\images" alt="mypic" id="thumb">
<span id="caption">Caption for the default Image</span>
</body>
</html>
thanks again