JavaScript - Click On A Link With Onclick
Similar TutorialsI'm looking for a simple code to perform this function I'm 3/4 of the way there but need some help. I have a static GIF that is swapped for an animated gif after an onclick event. I want the animated gif to have a clickable URL that is activated once the user clicks on the static GIF. Here is the current code I have to show the animated gif from the onclick event, how do I add a web site URL to make the animated.gif a clickable image link? Code: <img src="static.gif" width="620" height="549" onclick='javascript:(this.src=="static.gif"?this.src="animated.gif":"")' /></a> Hey guys, I have this JS. Code: function funcBut(){ document.getElementById('ref_button').innerHTML = 'pressed'; } Now, this button activates the function with no problem: Code: <input type='button' onclick='funcBut();' value='Change Text'/><br /> But this link won't work and I don't understand why Code: <a href="#" onclick="funcBut(); return false;">test</a><br /> Can anyone 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 Hello I need script that change link after first click for example: <a href=URL1 target=_blank><img src=....></img></a> After click on this image , URL1 changes to URL2 and visitor when click on it again and again , it goes to URL2 Regards this is my html page.. Code: <html> <head> <script type="text/javascript" language="JavaScript"> function general_formats() { window.open('http://www.test.com/general_formats.php'); } </script> </head> <body> <a href="general_formats.php"><onclick="general_formats(); return false">General Formats</a> </body> </html> When i click ' general Formats ' , a window is opened , i dont need that . What i need is , when i click the link , it should direct to general_fomats.php.. please help me to solve it . .any help will be appreciated . I've been doing some searching and I can't seem to find what I am looking for. I hope someone can help. I am trying to target a link to an iframe window. The catch is that I need to use an onClick function in a TD tag... Here is an example: <TABLE HEIGHT="40" WIDTH="780" CELLSPACING="0" CELLPADDING="0" BORDER="1"> <TBODY> <TR> <TD ALIGN="CENTER">HEADER 1</TD> </TR> <TR> <TD OnClick="location='http://www.ophil.com'" BGCOLOR="#FFFFFF">Ophil</TD> </TR> </TBODY> </TABLE> </TD> </TR> <table width="100%" border="0" cellspacing="0" cellpadding="1"> <tr> <td><a name="bidframe"> <IFRAME SRC="bid_item_instructions.html" TITLE="IFRAME" SCROLLING="no" NAME="bidpage" WIDTH="100%" HEIGHT="450" ALIGN="center" FRAMEBORDER="yes" > </IFRAME> </a></td> </tr> </table> </CENTER> </BODY> </HTML> I need the results of that onclick to appear in the iframe window I have called bidframe... Any ideas? Hi all, Very new to this but I am trying to automate some webdownloads I need to do daily. I have a link I am trying to click via applescript do javascript I can return the frames html by doing tell application "Safari" do JavaScript "document.getElementById('iframesearch').contentDocument.getElementById('frmAccountList').innerH TML" in document 1 end tell the html returned contains the link link I want to click/fire <span id="SWGrdAccSearch_ctl06_lblAsterix"> </span> <a onclick="javascript:return getDefaultAccount('John Doe','0890','0','0');" id="SWGrdAccSearch_ctl06_lnkAccount" href="javascript:__doPostBack('SWGrdAccSearch $ctl06$lnkAccount','')">123456</a> how can I get his link to launch/fire? Any and all help deeply appreciated. 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 wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it? Code: function quote(id) { var shout = document.getElementById('shout'); var currentShout = '; '.shout.value; var prefix = '@'.id; shout.value = prefix.currentShout; } I call it by Code: <a href="#" onclick="javascript: quote('2');">Comment</a> the input that changes is written as Code: <input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);"> Hi guys. I have a quick question. What's the code for having a link with the id "autoid" clicked when the body of my html code loads? Thanks, Alex Hi, Im looking for help, I have been looking for a script like the following. Code: http://tools.th3-0utl4ws.com/admin-finder/ Where a visitor must click each link before accessing the website. Can any one help me please. Thanks in advance. 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> Hi guys I'm trying to simulate links clicking on web pages, don't know how to deal with javascript links. The link I'm trying to click contains a tag like this: <a href="javascript:function(1243423)">text</a> Would somebody help me out please? Thanks a lot When the user visits a page, an iframe will be displayed. What is the best way to force the user to click something in this iframe? I suppose I could do that thing where the mouse always has a part of a div "glued" to it, so wherever they click, the certain area is clicked. But, then they could just hit the back button. If you think this is the best way, could you please provide some code if you have some, or give me the name of this (I forget what this specific method is called)? If you don't think that's the best way, what's your idea? Thanks. Hello everyone! First of all let me introduce myself as this is my first post on the coding forums! My name's Tom, I live in Sheffield, England and I'm 21 years old. Anyway, I have a little problem on a project I'm working on. I have a div set with an onclick link (onclick="location.href='http://www.google.com/';"). Thats not the problem, that works fine. The problem I'm having is that I then have another div inside this div that I don't want to be linked at all but the outer div's link seems to still be active on the inner one. Does anyone have any idea how to stop the link on the inner div whilst still keeping the outer div linked? Thanks alot for any help, Regards, Tom. So I opted to use JavaScript & PHP (instead of Flash) to create a sort-of "t-shirt designer" -- basically, it's a gallery-type script that allows users to scroll through t-shirt styles, swap colors, and so on, prior to reaching the actual design tool. And I'm starting to regret. It's actually working very well so far, except for one thing: I want the t-shirt option that the user selects to link the user to the design tool. The "gallery" already has an image for each possible option that displays whenever the user selects a combination, but I want to make that image is a clickable link. I have no idea where to start -- I know next to nothing about javascript -- and to accomplish this in Flasjh I'd have to start this stupid basic thing all over again from scratch, and it would defeat the point of not using Flash in the first place, so... any ideas or suggestions? I just cannot get the html to load for each linked button to the Iframe. If I remove the "onclick" command for the backround images, the links load to the Iframe. If I leave the "onclick" command in there only the background changes. So, I would assume there is a conflicting issue with loading the "a href" and the "onclick" commands together. Maybe I need to know how to do multiple "onclick" commands...suggestions? Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to Whitetail Fantasies</title> <link href="layout.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body { font-family:Tahoma, Geneva, sans-serif; background-color: #000; } #background { position:absolute; float:left; width:1024px; height:768px; background-image:url(wf_layout/wf_bkgnd-1.jpg); z-index:0; } </style> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('wf_layout/buttons/home_inv.png','wf_layout/buttons/aboutus_inv.png','wf_layout/buttons/trophies_inv.png','wf_layout/buttons/trailcams_inv.png','wf_layout/buttons/calendar_inv.png','wf_layout/buttons/contact_inv.png')"> <div id="background"></div> <div id="outer"> <div id="header"></div> <div id="wrapper"> <div id="left_side"><br /><br /><br /><br /><br /><br /><br /> <table width="140" border="0" cellspacing="0" cellpadding="0"> <tr> <td><a href="wf_home.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-1.jpg)'; return false;" onmouseover="MM_swapImage('btn_home','','url(wf_layout/buttons/home_inv.png)',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/home.png" alt="Home button" name="btn_home" width="140" height="42" border="0" id="btn_home" /></a></td> </tr> <tr> <td><a href="wf_aboutus.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-2.jpg)'; return false;" onmouseover="MM_swapImage('btn_aboutut','','wf_layout/buttons/aboutus_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/aboutus.png" alt="About Us Button" name="btn_aboutut" width="140" height="42" border="0" id="btn_aboutut" /></a></td> </tr> <tr> <td><a href="wf_trophies.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-3.jpg)'; return false;" onmouseover="MM_swapImage('btn_trophies','','wf_layout/buttons/trophies_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trophies.png" alt="Trophies button" name="btn_trophies" width="140" height="42" border="0" id="btn_trophies" /></a></td> </tr> <tr> <td><a href="wf_trailcams.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-4.jpg)'; return false;" onmouseover="MM_swapImage('btn_trailcams','','wf_layout/buttons/trailcams_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/trailcams.png" alt="Trial Cams Button" name="btn_trailcams" width="140" height="42" border="0" id="btn_trailcams" /></a></td> </tr> <tr> <td><a href="wf_prices.html" target="_IFrame" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-5.jpg)'; return false;" onmouseover="MM_swapImage('btn_prices','','wf_layout/buttons/calendar_inv.png',1)" onmouseout="MM_swapImgRestore()"><img src="wf_layout/buttons/calendar.png" alt="Prices button" name="btn_prices" width="140" height="42" border="0" id="btn_prices" /></a></td> </tr> <tr> <td height="41" align="center" valign="middle"><a href="wf_contact.html" target="_IFrame" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_contact','','wf_layout/buttons/contact_inv.png',1)" onclick="document.getElementById('background').style.backgroundImage='url(wf_layout/wf_bkgnd-6.jpg)'; return false;"><img src="wf_layout/buttons/contact.png" alt="contact button" name="btn_contact" width="137" height="41" border="0" id="btn_contact" /></a></td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"><img src="mdclogo.png" alt="mdc_logo" width="120" height="106" border="0" usemap="#Map" /></td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table> </div> <div id="content_area"> <br /><br /><br /> <iframe name="_IFrame" style="width:800px; height:500px;" src="wf_home.html" frameborder="0" allowtransparency="true"></iframe> </div> iu </div> </div> <div id="footer"></div> <map name="Map" id="Map"> <area shape="poly" coords="0,100" href="#" /> <area shape="poly" coords="58,1,119,97,1,99" href="http://mdc.mo.gov/hunt/" target="_blank" /> </map> </body> </html> Hi. So, I have this loop I run to retrieve wallposts with php. Within this loop, I want a link/button on every post that says "comment". When the user clicks the comment link I want a comment field and post button to appear on the post I clicked on. The problem is that when I've tried making a link that does this, it only drops down the comment field on the most recent wallpost regardless of which wallpost I click on. I'd appreciate some help, a lot! Hey all, Hoping someone could help me out with some javascript coding as I am a complete novice to this! I am currently building a website using 1 static page and all the content will be pulled in through different iframes by clicking on a navigation on the page. I found a very handy piece of javascript coding that lets me remove a class from one link and move it to the link that was clicked on (the code will be below). The issue I am facing with this is that if I have Home set to class="On" to begin with and then click on Location, the background image will be added to the Location section but won't get removed from Home until it is physically clicked on. Can anyone help me out with how I can get this to work correctly? javascript: Code: <script language="JavaScript" type="text/javascript"> var Lst; function CngClass(obj){ if (typeof(obj)=='string') obj=document.getElementById(obj); if (Lst) Lst.className=''; obj.className='On'; Lst=obj; } </script> HTML: Code: <div id="navWrapper"> <div id="globalNav"> <ul> <li onclick="CngClass(this);" class="On"><a href="iframes/home.html" target="content_iframe">Home</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/location.html" target="content_iframe">Location</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/speakers.html" target="content_iframe">Speakers</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/agenda.html" target="content_iframe">Agenda</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/useful_material.html" target="content_iframe">Useful Material</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/event_presentations.html" target="content_iframe">Event Presentations</a></li> <li onclick="CngClass(this);" class=""><a href="iframes/gallery.html" target="content_iframe">Gallery</a></li> </ul> </div> <div id="localNav"></div> </div> |