JavaScript - Change Link After Click

hi master.

I need some help.

I need a function that change multiple images on click maybe by id
Ex.:
PHP Code:
<table>
.....
<td><img src="folder1/image1.jpg"></td>
<td><img src="folder1/image2.jpg"></td>
<td><img src="folder1/image3.jpg"></td>

<td><img src="folder2/image1.jpg"></td>
<td><img src="folder2/image2.jpg"></td>
<td><img src="folder2/image3.jpg"></td>
.....
</table> 


NOW BUTTONS (IMAGES)
PHP Code:
<!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> 
<div><img src="buttons/buton1.jpg" alt=""></div>
<div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div>

<!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> 
<div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> 


really, I don't know much about javascript, I'm waiting for your help.
actually, I have loaded jquery-1.2.6.min.js

Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again.

Code:

   <script type="text/javascript"> 
      $(document).ready(function(){ 
   $('.accordion-content').hide(); 
   //toggle the componenet with class accordion 
   $('.accordion-toggle').click(function(){ 
      //$(this).toggleClass('toggle-accordion-active'); 
      $(this).next('.accordion-content').slideToggle(300); 
   }); 
   $('#accordion-expand-all').click(function(){ 
      $('.accordion-content').slideToggle(300); 
   }); 
      }); 
    </script>

Code:

<p><a id="accordion-expand-all" href="#">Show</a></p>

I have 4 images and these images are changing automatically with duration of 2 seconds with show hide animation.

and there are 4 bullets with mentioned above 4 images. these bullets are highlighting for example if image number 1 is showing than bullet number 1 is highlighting. same thing for other 3 bullets and images


please send me the code for it

Greetings,

In a vertical expanding menu, I'm looking to change where the user clicks in order to expand the menu to the submenu. In short I want the user to be able to click on the parent menu item text and have that action expose the submenu children text items. Please see attached .png for visual.

At present, the user must click on an arrow icon next to the parent menu item text to expand, but I'd also like the parent menu item to expand showing its children when clicked. All the parent menu item does right now is call in the linked page; it does not expand the menu.

I've attached the .js in the 3 attached .txt files. Please let me know if there's anything else I should add/send.


As far as I can tell the name of the arrow being used to expand menu can be seen in this html...

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

<td class="wbtTdArrow" style="padding: 2px; border: 0px none;">
<a class="wbtArrowLink" title="Expand Welcome submenu" href="javascript:void(0)">
<img class="wbtArrowImg" src="images/collapse.png" alt="Expand Welcome submenu" style="width: 5px; height: 9px;">
</a>
</td>


Here's the html containing the name of the item I'd like to use in addition to the arrow...

<td class="wbtTdSelected">
<img src="images/spacer.gif" style="width: 0px; height: 0px;" alt="Selected menu item">
</td>

<td class="wbtTdMenuItem">
<a id="menuitem1" class="wbtMenuItem wbtMenuItemSelected" href="javascript:void(0)" title="Selected Chapter: Welcome">Welcome</a>
</td>

I want to change the color of the gridview when a button which has the
value of the row index of the gridview is clicked ...this button is not inside the gridview but some where else on the form but it can send the gridview rowindex to the function so need a function to change the color of the row or bring it to focus in someway...

Hi there! I need help!

Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words.

I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet

Please help me! Thanks so so much!

follow me on twitter - @robyn_90

Hi all,
I'm working on a script which is actually a very simple tab system.

Code:

<script>
window.addEvent('domready', function() {
var tabs = $$('div[id^="tab"]');
tabs.fade('hide');

$$('#buttons li a').each(function(element,index){
    element.addEvent('click',function(){
        tabs.fade(0);
        tabs[index].fade(1);
    });
});
});
</script> 

<ul id="buttons">
     <li><a href="#">button 1</a></li>
     <li><a href="#">button 2</a></li>
     <li><a href="#">button 3</a></li>
     <li><a href="#">button 4</a></li>
</ul>

<div id="tab1">content for button 1</div>
<div id="tab2">content for button 2</div>
<div id="tab3">content for button 3</div>
<div id="tab4">content for button 4</div>

I'm trying to change the style of the selected button. I mean that the button which is selected each time, should be highlighted (bold text). How can I add this function in the existing code? Can you help me please?

I'm using the 1.2.0 version of mootools for this.

basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text..
now what i need is a way to change all of these fields with a fetch button.
i can get the value for the fields from the perl script on my server side.

the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted .
i am struggling with the simplist of codes to set the value of the fields from a javascript variable
any ideas please.

hello everyone.
i am new to this forum and new with webdesigning..

i was wondering if anyone can help guide me to get the right coding

im trying to make it so that when clicking thumbnails it will change the full screen background to its respective picture along with continuing its automatic slideshow

www.petpawfurry.com is the website in which im working on.

also, is there anyway to make the slider, slide to the right, instead of fading in and out?

thanks so much, hope someone can help

Is there some javascript that will make a link in a page be clicked on page load?

javascript****

so so basically what i wana do is is preform a search in google... easy enough, thats working. what i need to do is to have the last searched link on the page be submited to display via javascript.

essentially what i am doing is creating a "reverse" im feeling lucky button.

i have no clue how to do this, im new to java, however, i was discussing with a friend the possibility of omiting results that started with http://google and searching from the bottom up to obtain the last result?

anyone who was any input on how to get this to work would be appreciated

thanks

i am trying to change my background image after click on given in grid option. any body show me complete code in java script.

resource: HP Laptop Repair and Solution Service Center in Delhi

Hello Again,

After much help and support i have decided that the best way to do what i want (if i can get it working is like the below).

The idea is to click a link and content will load into a div from another div on another page in the same webspace. I can make a test page as directed by the guidance i recieved but there are some features that wont work properly or are not what i am after. For example in the test case the link to load the div is inside the div i want to update. In my case i want to click on the algebra link in the blue horizontal menu and then the main menu updates. I wont lie i have not got the skills to adapt this script on my own.

here is the test page

http://www.bushcottages.co.uk/loaddata.htm

the main page i would like it to work on as its not working correctly is

http://www.bushcottages.co.uk/new.htm

test code is

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Click This Link To Load My Favor</title>

<script type="text/javascript" src="java/jquery-1.5.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
 {
  $("#loadData").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="favoriteMovies"></div>')
                    .children("#favoriteMovies").hide()
                    .load("theOtherPage.htm ul#favoriteMovies", function()
                     {
                      $("#loadData").remove();
                      $("#favoriteMovies").slideDown("slow");
                     });
   return false;
   });
});

</script>

<style type="text/css">

#container
{
	width: 300px;
	height: 200px;
	font-family: georgia;
	font-weight: bold;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
}

</style>

</head>

<body>
<div id="container">
<li><a href="#" id="loadData">Click This Link To Load My Favorite Movies</a></li>
</div>
</body>

</html>

code for main page is

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-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Mathematics Learning Zone</title>
<meta name="description" content="Learn Key Stage 4 Mathematics and Achieve a Grade C.">
	<meta name="keywords" content="Maths, Mathematics, Key Stage 4, Key Stage 4 Maths, GCSE Maths, Maths Grade C">
	<meta name="author" content="Peter Devlin">

<script type="text/javascript" src="java/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://www.bushcottages.co.uk/java/jquery.newsTicker-1.2.2.js"></script>
			<script type="text/javascript">
			<!--
			$(document).ready(function() {
				if (document.getElementById('news')) {
					var options = {
						newsList: "#news",
						tickerRate: 20,
						loopDelay: 6000,
						startDelay: 10,
						placeHolder1: "_"
					}
					$().newsTicker(options);
				}
			});
			-->
			</script>
			
<script type="text/javascript">

$(document).ready(function() {

	//Default Action
	$(".tab_content").hide(); //Hide all content
	$("ul.tabs li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	
	//On Click Event
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});

});
</script>

<script type="text/javascript">
var newwindow;
function poptastic(url)
{
	newwindow=window.open(url,'brainteasersolution.htm','height=400,width=400,left=40%,top=20%');
	if (window.focus) {newwindow.focus()}
}
</script>

<script type="text/javascript">
$(document).ready(function()
 {
  $("#number").click(function()
   {
    $(this).text("...One Moment Please...");
     $("#container").append('<div id="Algebra"></div>')
                    .children("#Algebra").hide()
                    .load("Algebra.htm ul#algebra", function()
                     {
                      $("#number").remove();
                      $("#Algebra").slideDown("slow");
                     });
   return false;
   });
});

</script>

<style type="text/css">

*
{
border: 0;
margin: 0;
padding-top:0;
}
#topmargin
{
width:900px;
height:5px;
margin:auto;
}

#banner
{
	width: 900px;
	height: 70px;
	background-image: url('banner.png');
	margin: auto;
	margin-bottom: 5px;
	background-color: #000066;
}

#horizontalmenu
{
	width: 900px;
	height: 25px;
	margin: auto;
	margin-bottom: 5px;
	background-color: #000066;
}

#horizontalmenu ul
{
list-style-type: none;
margin: 0px;
padding: 2px 0px 0px 0px;
}

	#horizontalmenu ul li
	{
	float: left;
	display: block;
	text-align: center;
	width: 300px;
	}

		#horizontalmenu ul li a 
		{
		text-decoration: none;
		font-family: georgia;
		font-size: 1em;
		color: #fafafa;
		}

		#horizontalmenu ul li a:hover
		{
		font-family: georgia;
		font-size: 1em;
		padding: 5px 40px 5px;
		color: #000000;
		background-color: #ffffff;
		}

#mainpage
{
	width: 900px;
	margin: auto;
}

#one
{
	float: left;
	width: 150px;
	margin-right: 5px;
}

#two
{
	float: left;
	width: 590px;
	margin-right: 5px;
}

#three
{
	float: left;
	width: 150px
}

#verticalmenu
{
	float: left;
	width: 150px;
}

	#verticaltopmenu
	{
	float: left;
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#verticalmainmenu
	{
	float: left;
	width: 146px;
	height: 372px;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	padding-top: 2px;
	padding-bottom: 2px;
	}

		#verticalmainmenu ul
		{
		text-decoration: none;
		list-style: none;
		padding: 0px;
		margin: 0px;
		color: black;
		}

			#verticalmainmenu ul li 
			{
			list-style: none;
			text-decoration: none;
			display: block;
			padding: 0px;
			text-align: left;
			font-family: georgia;
			font-size: .8em;
			color: black;
			}

				#verticalmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

				#verticalmainmenu a:hover 
				{
				background-color: white;
				color: #000066;
				}

#tickercontainer
{
	float: left;
	width: 586px;
	height: 21px;
	margin-bottom: 5px;
	border-color: #000066;
	border-style: solid;
	border-width: 2px;
}

	#tickersidetitle
	{
	float: left;
	width: 125px;
	height: 21px;
	background-color: #000066;
	}

	#tickercontent
	{
	float: left;
	width: 461px;
	height: 21px;
	padding: 0px;
	}

		ul#news
		{
		margin: 0px;
		height: 21px;
		padding: 0px 0px 0px 0px;
		}
	
			ul#news li
			{
			list-style: none;
			font-family: georgia;
			font-size: 14px;
			font-weight: bold;
			color: #004400;
			margin: 0px;
			padding: 0px 0px 0px 10px;
			}
 
				ul#news li a:link, ul#news li a:hover
				{
				color: #004400; 
				text-decoration: none; 
				}

#contentwindow
{
float: left;
width: 590px;
}

	ul.tabs
	{
	width: 590px;						/*--Set width of container--*/
	height: 23px;						/*--Set height of tabs--*/
	margin: 0px;
	padding: 0px;
	float: left;
	list-style: none;
	border-bottom: 2px solid #000066;	/*--Set line at bottom of ul--*/
	}

		ul.tabs li
		{
		float: left;
		margin-right: 1px; 				/*adjusts gap between tabs*/
		height: 23px;					/*--Subtract 1px from the height of the unordered list--*/
		line-height: 23px; 				/*--Vertically aligns the text within the tab--*/
		margin-bottom: -2px;
		background: #000066;
		border-color: #000066;
		border-style: solid;
		border: 2px;
		}
		
			ul.tabs li a
			{
			text-decoration: none;
			color: #FFFFFF;	
			font-family: georgia;
			font-size: 14px;
			display: block;
			padding: 0 20px;
			}
			
			ul.tabs li.active a
			{
			color:#000000;
			border-color: #000066;
			border-style: solid;
			border: 2px;
			}
			
			ul.tabs li a:hover
			{
			background-color: #330099;
			border: 0px;
			}
						
			ul.tabs li.active, ul.tabs li.active a:hover		/*--Makes sure that the active tab does not listen to the hover properties--*/
			{ 
			color: #000000;
			background: #FFFFFF;
			border-color: #000066;
			border-style: solid;
			border: 2px 2px 2px 0px;
			border-bottom: 2px solid #FFFFFF; /*--Makes the active tab look like it's connected with its content--*/
			}

.tab_container {
	border: 2px solid #000066;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; 
	width: 586px;
	height: 346px;
	background: #FFFFFF;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

#testsmenu
{
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

	#teststopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#testsmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}
		#testsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#testsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('test.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#testsmainmenu ul li a 
				{
				padding: 0px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

				#testsmainmenu ul li a:hover 
				{
				background-color: white;
				color: #000066;
				}
#downloadsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

	#downloadstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#downloadsmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#downloadsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#downloadsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('download.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#downloadsmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#downloadsmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}
#worksheetsmenu
{
float: left;
width: 150px;
margin-bottom: 5px;
}

	#worksheetstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#worksheetsmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#worksheetsmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#worksheetsmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('worksheet.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#worksheetsmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#worksheetsmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}

#weblinksmenu
{
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

	#weblinkstopmenu
	{
	width: 150px;
	height: 23px;
	background-color: #000066;
	}

	#weblinksmainmenu
	{
	float: left;
	width: 146px;
	height: 70px;
	border-style: solid;
	border-width: 2px;
	border-color: #000066;
	}

		#weblinksmainmenu ul 
		{
		float: left;
		margin-top: 2px;
		margin-bottom: 2px;
		width: 146px;
		padding: 0px;
		}

			#weblinksmainmenu ul li 
			{
			font-family: georgia;
			font-size: 0.8em;
			list-style-image: url('links.png');
			margin-left: 30px;
			padding: 0px;
			text-align: left;
			}

				#weblinksmainmenu ul li a 
				{
				padding: 0px 0px 0px 5px;
				text-decoration: none;
				text-align: left;
				color: black;
				}

					#weblinksmainmenu ul li a:hover 
					{
					background-color: white;
					color: #000066;
					}

p
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 2px;
}

p.a
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #FFFFFF;
	padding-top: 0px;
}

p.b
{
	text-align: center;
	font-family: georgia;
	font-size: 1em;
	color: #000000;
	padding-top: 0px;
}

p.c
{
	text-align: center;
	font-family: georgia;
	font-size: 8px;
	color: #000000;
	padding-top: 0px;
}

</style>

</head>


<body>

<div id="topmargin"></div>
<div id="banner"></div>

<div id="horizontalmenu">
	<ul>
		<li> <a href="#" id="number">Number and Algebra</a></li>
		<li><a href="url">Geometry and Measures</a></li>
		<li><a href="url">Statistics - Data Handling</a></li>
	</ul>
</div>

<div id="mainpage">

	<div id="one">
		<div id="verticalmenu">
			<div id="verticaltopmenu"><p>Main Menu</p></div>
			<div id="verticalmainmenu">
				<ul>
					<li><a href="url">Angles</a></li>
					<li><a href="url">Properties of Shapes</a></li>
					<li><a href="url">Circle Theorems</a></li>
					<li><a href="url">Geometry of Cuboids</a></li>
					<li><a href="url">2d and 3d Shapes</a></li>
					<li><a href="url">Area</a></li>
					<li><a href="url">Perimeter</a></li>
					<li><a href="url">Prisms</a></li>
					<li><a href="url">Surface Area</a></li>
					<li><a href="url">Using Pi</a></li>
					<li><a href="url">Volumes</a></li>
					<li><a href="url">Transformations</a></li>
					<li><a href="url">Scale</a></li>
					<li><a href="url">Coordinates</a></li>
					<li><a href="url">Vectors</a></li>
					<li><a href="url">Bearings</a></li>
				</ul>
			</div>
		</div>
	</div>

<div id="two">
	<div id="tickercontainer">
		<div id="tickersidetitle"><p class="a">Brainteasers</p></div>
		<div id="tickercontent">
			<ul id="news">
				<li>How many Degrees in a Triangle?</li>
				<li><a href="javascript:poptastic('brainteasersolution.htm');">Algebra - What is 4x = 20 - X? Click for answer</a></li>
				<li><a href="http://www.bushcottages.co.uk/1.htm">What is the most common class Called?</a></li>
			</ul>
		</div>
	</div>
	<div id="contentwindow">
		<ul class="tabs">
   			<li><a href="#tab1">Acute</a></li>
    		<li><a href="#tab2">Obtuse</a></li>
    		<li><a href="#tab1">Reflex</a></li>
    		<li><a href="#tab2">Vertex</a></li>
		</ul>

		<div class="tab_container">
 		<div id="tab1" class="tab_content">
        <p class="b">hello</p>
        <p class="c">Page Created by P.Devlin</p>
   		</div>
   		<div id="tab2" class="tab_content">
    	<p class="b">well done</p>
    	<p class="c">Page Created by P.Devlin</p>
    </div>
</div></div>
</div>
	

	<div id="three">
		<div id="testsmenu">
			<div id="teststopmenu"><p>Online Tests</p></div>
			<div id="testsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Averages</a></li>
					<li><a href="url">Algebra</a></li>
				</ul>
			</div>
		</div>
	
		<div id="downloadsmenu">
			<div id="downloadstopmenu"><p>Downloads</p></div>
			<div id="downloadsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	
		<div id="worksheetsmenu">
			<div id="worksheetstopmenu"><p>Worksheets</p></div>
			<div id="worksheetsmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	
		<div id="weblinksmenu">
			<div id="weblinkstopmenu"><p>Web Links</p></div>
			<div id="weblinksmainmenu">
				<ul>
					<li><a href="url">Linear Graphs</a></li>
					<li><a href="url">Equations</a></li>
					<li><a href="url">Algebra</a></li>
					<li><a href="url">Tests</a></li>
				</ul>
			</div>
		</div>
	</div>

</div>


</body>

</html>

Many thank to you all for your help so far.
Peter

I really don't know what I am doing, but I need to know how to alter this script to load this website without having to click "Weathersentry online". I would like to double click on the icon the code is attached to and it sign in automatically. Can anyone help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sample Signin link WeatherSentry Online</title>
</head>

<body>

<form id="DTNSigninForm" action="http://weather.dtn.com/dtnweather/common/signin.do" style="margin: 0,0,0,0;" >
<a onclick='document.getElementById("DTNSigninForm").submit();return false;' href="javascript:void(0);">WeatherSentry Online</a>
<input type="hidden" name="username" value="username" />
<input type="hidden" name="password" value="password" />
<input type="hidden" name="autoLogin" value="true" />
</form>

</body>
</html>