|
JavaScript - Static Gif To Onclick Gif With Link
I'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> Similar TutorialsHey 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? 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? 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>
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. 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>
I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Write a public static method named starPrinter that will take an int as a parameter and print lines of stars as shown below. The header of the method will be public static void starPrinter(int n) . This is what it should look like: Please help! Is there any way that I can make my HTML website STAY updated from a javascript innerHTML or value change? I've only used it a little...
I have a google static map which I spent ages trying to work out what to put in it and now it will not work, or be valid, so I am doing something wrong? Can anyone help Have I set it out the right way, I know it is static but it is still JS I believe. Code: <p><img alt="google_static_map" src="http://maps.google.com/maps/api/staticmap?center=51.454863,0.011673&zoom=13&markers=United+Reformed+Church,+111+Burnt+Ash+Road,++Lee,+London+SE12+8RG,+UK&size=250x250&sensor=TRUE /></a></p> DO I need to put in it a div? I cant do iframes. My editor does not like it at all and it is not showing on the website. I am using XHTML Hi guys, I was wondering if anyone knows how I can achieve this static footer as seen on this site http://garcya.us/blog/80-vector-tags/ I assume its javascript which gives you the option of hiding the bar or letting it present vearious social site links etc? Thanks in advance! Kyle Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. I'm working on a technical document that has a glossary section. When I use a technical term, I link to its definition in the glossary then provide a return link to return the user to whence they came. But if I use that same term again, and if I want to link it to the glossary, I need to duplicate the glossary entry in order to provide a return link that returns them to the right place. Is there some way I could link them to the glossary and embed a unique return link in the link to the glossary?
Hey guys, OK, so I have two buttons (code below) that when a user clicks on it, it will place text in a textarea. You can view all the code below: Buttons: Code: <div id="newButton">
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/graphi10.png" alt="Request a Graphic"></a>
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/review11.png" alt="Request a Review"</a>
</div>
The textarea ID is: Code: text_editor_textarea and this is the code that I would like to be placed inside the textarea: Code: Nature of Request: Creation Size: Primary Colors: Text To Insert: Donation: Extra Information: URL: I tried this, but the BBCode would not keep it's structure and would all end up on one line. EDIT: Oh...The BBCode is parsing inside the code box >.< hi everybody.. i have this simple code: Quote: <html> <head> <script language="javascript" type="text/javascript"> document.write("<input type='button' value='push' onclick='hi()'/>"); function hi() { alert("hi"); document.write("<input type='button' value='enter' onclick='javascript: bye()'/>"); } function bye() { alert("bye"); } </script> </head> <body> </body> </html> if i try to run it on chrom its works well.. but on IE or FireFox its not define the bye() function.. whats the reason?! and how i can solve it?.. thanks very much.. <a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" > Now this showclubs function shows a hidden div and at the end I have a return:false; but when you click on the link - it still seems to reload to the page and take you to the top how can I get it to just show the div without seeming to reload the page? |
|||||||