|
HTML - Rollover Button Problem! Nothin Too Big!!
hey not too sure if I am overlooking something but i have my rollover buttons set up fine and they are working but whenever I click on them(my browser is google chrome),
they produce a black rectangle just underneath, they also jump a bit when clicked. the site page is www.spaseafoods.com/Untitled-1.html and you will see the link buttons there, here is the code for the buttons; <a href="Untitled-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/cooltext446156370MouseOver.png',1)"><img src="/cooltext446156370.png" name="Image7" width="87" height="39" border="0" id="Image7" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','/cooltext446156370.png',1)"></a> Similar TutorialsI need to add sound to a rollover button. I have downloaded the sound file(.wav) that I want and have in my project's folder. When I check the Dreamweaver help section it says to link to the sound; problem is I also need to link to a page when the button is clicked. How do I acheive this? I am using Dreamweaver 8. I appreciate all help offered. Thanks, Tazmania Hello, this may sound like a dumb question: Is there a way build a button that on rollover makes an image appear beside it? thanks I am not an HTML expert. The design program I inherited has a CSS assigned to a "Learn More" button that reads as follows:
Code: #slideshow .learn_more { position: relative; background: url(/graphics/btn-learn_more.png) no-repeat; display: block; height: 27px; text-indent: -9999px; width: 123px; z-index: 2; }
#slideshow .learn_mo hover { background-position: 0 -27px; }
As far as I can tell, it seems what that is doing is showing the top 27 pixels of a built-in "Learn More" graphic, and when you hover over it, it shows the bottom 27 pixels and gives the illusion of a rollover. My question is, what direct HTML code could I assign to a graphic to duplicate that effect so I can customize my own buttons? For instance, let's say I want the below graphic (which is 242x54, named button.jpg) to link to google.com. What code would I use to create the hover effect I described above? How to make a image rollover based menu that changes image on mouse rollover and on mouse click so when I click the image it stays changed until I click on another image in the menu. So in January 2006 I posted a question about "making two buttons in one" 3 years and 5 months later i am happy to announce that I have found a solution. Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A' All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find. HTML Code: <html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>
</head>
<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>
I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless. Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method. So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses. here is the awesome code: Code:
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}
function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect. Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space. So here is how I used the above to JavaScript to make a simple onclick image toggle: HTML Code: <img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">
Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers. So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons: Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow... The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality. So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool. So here's the basic code for a rollover: HTML Code: <img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>
To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily. So, back to the on/off button here is how you would code it using showHide with rollovers. HTML Code: <img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')" style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">
So here is what is going on: you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene? Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers... But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see. I seem to be having a problem with my image rollover effect in the header of my website. I am using CSS to call in the image. When using IE, the rollover happens much too slow. This doesn't seem to be a problem in firefox or safari. Any suggestions? Site: www.gallantgifts.com CSS: www.gallantgifts.com/css/master.css Thanks!! Hey guys, I'm a designer trying to code my website which is problem number 1. I'm trying to crreate these solid rollover states for my graphic headers on my nav (about and contact). I found a site that I plugged code from using javascript which i dont' know. The "about" link works fine but the "contact" link effects teh about link instead of targeting itself. Any help you can offer I would really appreciate. Thanks! here's my site: http://www.bru.us.com here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BRU</title> <link rel="stylesheet" type="text/css" href="bru.css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "nav/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div id="header"> <img src="images/logo_gold.gif" /> </div> <div id="navigation"> <IMG SRC="images/nav_header_design.gif"/><br> <a href="about.html"class="catlink">TowerGroup</a><br> <a href="about.html"class="catlink">PSR</a><br> <a href="about.html"class="catlink">Click&Buy</a><br> <a href="about.html"class="catlink">MCA</a><br> <a href="about.html"class="catlink">Incretin Forum</a><br> <a href="about.html"class="catlink">Mastercard</a><br> <a href="about.html"class="catlink">Baraclude</a><br> <a href="about.html"class="catlink">IconNicholson</a><br> <a href="about.html"class="catlink">FIFA</a><br> <br> <br> <IMG SRC="images/nav_header_other.gif"/><br> <a href="india_photos.html"class="catlink">India</a><br> <br> <br> <a href="about.html"> <img src="nav/about1.gif" name="about" onMouseOver="over(0)" onMouseOut="out(0)"> </a><br><br> <a href="mca.html"> <img src="nav/contact1.gif" name="contact" onMouseOver="over(0)" onMouseOut="out(0)"></a><br> </div> <div id="portfolio"> <IMG SRC="images/towergroupmarketing/tw_moodboard.jpg"/>     </div> <div id="description"> <h1>TowerGroup / Moodboard</h1> <p> When TowerGroup came to us and talked about what they felt differentiated them from other financial institutions, one thing that stood out to me, was that they wanted to communicate that they're analysts are hands-on and accessible. To express this concept in a website, I thought mixing hand-drawn illustrations with photographs would help give the site a more personable feel. </p> </div> <!--Content--> <div style="position:absolute; top:474px; left:499px;"></div> </body> </html> Hello I have an issue with a rollover on my page. I'm building a website for AS level media coursework and need help with a code. The rollover is part of a table and is aimed to play music when the mouse hovers over it, while at the same time switching the image to another... The code for the rollover itself is: Code: <a href="#" onMouseOut="MM_swapImgRestore()""stopSound(0);" onMouseOver="MM_swapImage('Image9','','piece1.jpg',1)""playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a>
The bad javascript for the image swap is: Code: <script language="JavaScript" 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>
And finally the even worse coding for the sound is: Code: <SCRIPT LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "Kylie.mp3";
aySound[1] = "fseven.mp3";
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//--></SCRIPT>
I hope someone can resolve my issue for me, for I'm absolutely stumpted by this. I have very limited expertise in coding (as you can see) and would greatly appreciate any help I can recieve. Thank you for your time. The website I am working on is he http://radarcartoons.com/test/test.html I want each of those "blips" to change to the other pictures I have of them lit when you rollover it, but I can't figure out how to do a rollover script for multiple images on one page. The names of my alternate files are the same as the regular ones, except they have an _lit.jpg after them. So if it's 2.jpg, then the lit one would be 2_lit.jpg. I will also of course want to make them links to pages which i still have to make, but maybe the code just to make them links and an example link could show me how to get it working. Thanks a lot to anyone who can help me out on my big request! Hello Folks, I have created a graphic using photoshop CS2 that will form the basis of a webpage. I am a little stuck as to how to include rollover buttons. This is the graphic as it is at the moment: http://magicalwonders.com/colingreen/ With my first attempt at using a background graphic for a website I was able to use a repeating tile in the left hand side bar, and insert basic image buttons for navigation. This time though the situation is a little different, as I am not using a solid colour in the side bar, in favour of a graduated colour image. I have yet to slice the graphic, and will create a slice towards the bottom of the graphic that can be used to repeat - so that any overflow text doesn't break the design. What I'm not sure about is, if the main background image for the side bar, and the repeat background tile can occupy the same cell, both as background images? If they can, then adding rollover buttons should not be a problem. If they can, I'm not sure what the code would look like to handle that. If they can't, I'm wondering what other method can be used to include Rollover navigation buttons. I'd be grateful if someone can advise. Many thanks, Myles I'm trying to make an image appear/change in response to a rollover, but the image is not in the same table as the rollover. I'm trying to redesign the header of my website, and have come up with this draft: bottleweb.org/test I want an image to appear in between the "BOTTLEWEB.ORG" text and the buttons. If for example I move my mouse over the 'forum' button, I want an image corresponding to 'forum' to appear in between the buttons and the "BOTTLEWEB.ORG" test. Is this possible? I'm about to rip my hair out on this one. I'm using Dreamweaver 8. I have navigation that is using image rollovers to swap. My images that are needed for the rollover to work are in my "assets" folder in the "root" directory. However, when I create the actual html page off the template it is looking for the image in "templates/assets" and therefore does not find the image to swap. I have a number of different navigation buttons and I inserted them all the exact same way. This is the only one that is having this issue, the rest work properly. This is the code that resides on the templates page. Code: <p class="navimage">
<a href="../logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set','','..assets/menu/log_over.jpg'',1)"><img src="../assets/menu/log_default.jpg" alt="Log & Grate Set" name="Log & Grate Set" width="158" height="34" border="0" id="Log & Grate Set" /></a></p>
Notice the Set','','..assets/menu/log_over.jpg. This is the code that is produced when you create an html page from the template. Code:
<a href="logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set',Templates/'','..assets/menu/log_over.jpg'',1
For some reason it is adding the directory templates, and therefore does not find the image. Does anyone know how I can fix this? Thanks, braves07 In my HTML page, I have two forms. Form 1: Radio Button A, Radio Button B, Radio Button C Form 2: Radio Button D, Radio Button E, Radio Button F. Form 2 Radio Button are disabled. If I click on A, D will be the only button enabled, if I click on B, E will be the only button enabled, if I click on C, F will be the only button enabled. However, when I click on one of the Radio Buttons of Form 1, if I am using the Internet Explorer (version 6), the radio buttons in Form 2 are still disabled. It is not until I click on somewhere else that the proper button will be enabled. So, if I click on A, nothing will be enabled. After I click somewhere else, only after that D is enabled. Worse, if I click B, nothing happens and when I click C next, E will be the one enabled (but when I click on somewhere else, F will be enabled). This only happens in Internet Explorer. It works fine with Mozilla Firefox. I'd like to know if there's a solution to this if I am using the Internet Explorer. Here's a sample of my code: <form name="form1"> <input id="ButtonA" type="radio" name="radiobutton" value="valueA" onChange="document.form2.d.disabled=false;document.form2.e.disabled=true;document.form2.f.disabled=t rue;"> <input id="ButtonB" type="radio" name="radiobutton" value="valueB" onChange="document.form2.d.disabled=true;document.form2.e.disabled=false;document.form2.f.disabled=t rue;"> <input id="ButtonC" type="radio" name="radiobutton" value="valueC" onChange="document.form2.d.disabled=true;document.form2.e.disabled=true;document.form2.f.disabled=fa lse;"> </form> <form name="form2"> <input id="ButtonD" id="d" type="radio" name="radiobutton" value="valueD" disabled=true> <input id="ButtonE" id="e" type="radio" name="radiobutton" value="valueE" disabled=true> <input id="ButtonF" id="f" type="radio" name="radiobutton" value="valueF" disabled=true> </form> Please kindly help. Thank you. Best regards, ChrisX Hi: This is with reference to my developing website: www.mesaeastpark.com Using MS Internet Explorer Version 7, I have no difficulty placing my Submit and Reset buttons with 'Position: absolute;' in my chosen position. However, when I check the same page with Opera, Safara, Chrome, and Firefox, those same buttons appear much higher on the page and obscure another input field This is very puzzling. To access the problem page: Please access my website, then - Click on 'Visit Us' - Cllick on 'Real Estate Services' - Click on 'Rent out Your Home' - Note the placement of the 'Submit' and 'Clear' buttons. In IE, they appear correctly: stacked vertically to the right of the <textarea> element In Opera, Firefox, Chrome, and Safari, they appear far higher on the page, obscuring other input fields ( I will include below the markup for this page: Thanks for any hints on this puzzle ! (btw, I use Apache 2.10 on my own server beside me) -Mel Smith ********************************************************* Content-Type: text/html <?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" lang="en" xml:lang="en"> <head> <title>Rent Out Your Mesa East Home</title> <style type="text/css" media="screen"> body { background: yellowgreen; } div { position: absolute; background: yellow; padding: 5px; width: 260px; height: 120px; } div#top-left { top: 1px; left: 1px; height: 82px; font-size: 12px; border-right: 1px solid black; border-bottom: 1px solid black; } div#top-right { top: 1px; right: 1px; height: 82px; font-size: 12px; border-left: 1px solid black; border-bottom: 1px solid black; } div#rentinfo { position: absolute; height: 400px; width: 900px; top: 94px; background: yellowgreen; padding: 5px; } div#buttons { position:absolute; left: 710px; top: 305px; width: 160px; height: 70px; color: black; background: yellowgreen; } input#frentsubmit { position: absolute; top: 10px; color: black; background: lightgrey; } input#frentreset { position: absolute; top: 50px; color: red; background: lightgrey; } fieldset { border: 1px solid black; } legend { margin: 0px; padding: 5px; color: darkmagenta; } input { background: wheat; } textarea { background: wheat; } input#fdetail { width: 480px; height: 120px; background: lightgrey; } td.empty { width: 10px; background: yellowgreen; } </style> </head> <body> <h2 align="center"><u>Rent Out Your Mesa East Home</u></h2> <div id="top-left"> <u>Deed Restrictions for Rentals</u><br /> No owner of any property in Mesa East POA shall rent that property or any part thereof unless and until the owner has maintained ownership for a continuous period of at least two (2) years. </div> <div id="top-right"> <u>Renter's Responsibility</u><br /> Ensure that the sum of $5.00 per month (or $50 per year) is paid to the Treasurer or Office Clerk for each person living in the rental property. (Visit the Office for Complete Renter's Rules) </div> <div id="rentinfo"> <form id="rentform" name="frmmenu" action="/cgi-bin/mep/mepinit.exe" method="post"> <input type="hidden" id="mformname" name="formname" value="RENTFORM" /> <fieldset> <legend><b>Owner and / or Agency Information</b></legend> <table id="continfo"> <thead> <tr> <td align="right"> Owner's and/or Agency's Name </td> <td class="empty" width="4"></td> <td align="right"> Contact Phone nnn-nnn-nnnn </td> <td class="empty" width="4"></td> <td align="center"> Email and/or Website Access </td> </tr> </thead> <tr> <td align="right"> <label for="fcontact">Owner : <input type="text" id="fcontact" name="contact" size="32" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fcontphone">Phone : <input type="text" id="fcontphone" name="contphone" size="12" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fcontemail">Email : <input type="text" id="fcontemail" name="contemail" size="40" /></label> </td> </tr> <tr> <td align="right"> <label for="fagency">Agency : <input type="text" id="fagency" name="agency" size="32" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fagencyphone">Phone : <input type="text" id="fagencyphone" name="agencyphone" size="12" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fagencyurl">Website : <input type="text" id="fagencyurl" name="agencyurl" size="40" /></label> </td> </tr> </table> </fieldset> <fieldset> <legend><b>Home Description</b></legend> <table id="homeinfo"> <tr> <td align="right"> <label for="fstyle">Style (D/W,S/W,etc) : <input type="text" id="fstyle" name="style" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fbdrms">Bedrooms : <input type="text" id="fbdrms" name="bdrms" size="5" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fbaths">Baths : <input type="text" id="fbaths" name="baths" size="5" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fsqft">Size (sqft) : <input type="text" id="fsqft" name="sqft" size="4" /></label> </td> </tr> <tr> <td align="right" colspan="3"> <label for="faddress">Address : <input type="text" id="faddress" name="address" size="32" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="flotno">Lot No. : <input type="text" id="flotno" name="lotno" size="4" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fyrbuilt">Year Built : <input type="text" id="fyrbuilt" name="yrbuilt" size="4" /></label> </td> </tr> </table> </fieldset> <fieldset> <legend><b>Rental / Lease Pricing & Terms</b></legend> <table id="priceinfo"> <thead> <tr> <td align="center"> $USD Cost for Period </td> <td class="empty" width="4"></td> <td align="right"> (Wk/Mth/Yr) </td> <td class="empty" width="4"></td> <td align="right"> StartDate: yyyymmdd </td> <td class="empty" width="4"></td> <td align="right"> EndDate: yyyymmdd </td> <td class="empty" width="4"></td> <td align="right"> Min Occ (e.g., 7 Wks) </td> </tr> </thead> <tr> <td align="right"> <label for="fprice">Cost ($ USD) : <input type="text" id="fprice" name="price" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fduration">per : <input type="text" id="fduration" name="duration" size="5" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fstdate">Available on : <input type="text" id="fstdate" name="stdate" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fnddate">Not Available after : <input type="text" id="fnddate" name="nddate" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fmintime">Minimum : <input type="text" id="fmintime" name="mintime" size="9" /></label> </td> </tr> </table> </fieldset> <fieldset> <legend><b>Enter Further Descriptive Details below (max: 254 chars)</b></legend> <textarea rows="4" cols="76" id="fdetail" name="detail"> Replace this line with descriptive features of your home and surroundings.</textarea> </fieldset> <div id="buttons"> <input type="submit" id="frentsubmit" name="rentsubmit" value="'Click' to Submit" /> <input type="reset" id="frentreset" name="rentreset" value="'Click' to Reset" /> </div> </form> </div> </body> </html> Hello All! I am a newbie to HTML and am having the most troubling time getting my submit button on my form to redirect to another webpage. I have been reading (searching) through previous posts on this issue but none solved my problem. I am really hoping someone can offer some help so let me explain my issue exacly. I have a simple form on my "Contact Us" page with a few fields and a [Submit]button. After the form is filled out and the [Submit] button is pressed, I would like it to re-direct to a "Thank-You" page I created. Below is my code: <form action="gdform.asp" method="post" name="contact_us" id="contact_us" target="cont"> <input name="submit" type="image" value="submit" src="images/Submit.gif"> If I take target="cont" out, it redirects to the home page. I have been trying to figure this out for so long now and searching online with no luck. Any help with this would be GREATLY appreciated!!!! Thanks! This may be a noob question, but I am building an HTML form (with a little Javascript) that allows a user to enter ordered-part information, which, when submitted, opens a blank email and fills in all of the variables in a specific context for other users to see. I'm not having a problem with any text variables, and I wasn't having a problem with the listbox that I was using. However, when I tried to convert the listbox to radio buttons (it's only two options), the variable returns "undefined" in the email body. Here's the email function: HTML Code: function testResults (form)
{
var VarStatus = form.Status.value;
parent.location="mailto:tony.smith@domain.com;?Subject=Ordered Part Info&body=VarStatus;
}
Then here's the radio button script: HTML Code: <input type="radio" name="Status" value="ISU">Issued</input> <input type="radio" name="Status" value="DUO">Due Out</input> And here's the listbox script that did work: HTML Code: <SELECT NAME="Status"> <OPTION VALUE="ISU">Issued <OPTION VALUE="DUO">Due Out </SELECT> Like I said, everything worked fine before with the listbox. Any ideas? I'm having a really weird problem with a standard submit button I'm trying to create. When I preview the site (GoLive CS3) the button doesn't always 'click' or 'depress' down. I can't figure out what is causing this. Anyone here ever seen this happen? Hey guys Im having trouble with some html code, if you could help out that would be great. What im trying to do is put an activeX control into a .htm page and use a html form. The .htm uses the activeX to read a .txt file, and displays the data in a table, with headings, descriptions, images, and a text box used for selecting a quantity. Then at the bottom of the page, I have made a simple send to email button, and a reset button. However my problem is; I dont think the code for the form is enclosing the whole table. Here's the code I hope this works... <body> <object id="Productlist"classid="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL"value ="data/Partsproductlist.txt"/> <param name="UseHeader" value="TRUE"/> <param name="FieldDelim" value=","/> </object> <table DATASRC="#Productlist" style="border-style: ridge; border-color:darkseagreen; background-color:lightcyan"> <thead><tr style="background-color:aqua"> <th></th> <th>Product Name</th> <th>Product Description</th> <th>Unit Price</th> <th>Quantity</th> </TR></thead> <tbody> <tr style="background-color: ***hsia"> <td><span><img DATASRC ="#Productlist" DATAFLD="ProdImage" width="150" height="150" /></span></td> <td><span DATAFLD ="ProductName"></span></td> <td><span DATAFLD="ProductDescription"></span></td> <td><span DATAFLD="UnitPrice"></span></td> <td> <form><input type="text" name="quantity" id="numberinput" value="0" tabindex="0"/></form></td> </tr> </tbody> </table> <form Name="FormProductBoundOrder" method="post" action="mailto:abc@abc.co.uk" subject="emailsubjectwouldgohere"> <input type="submit" value="send"/> <input type="reset"/> I am creating a website that has a search button with an image. I would like to know if there is some simple code that I can include that would display the same basic image with a different color when the user mouses over the button. Here is the code: <FORM name="searchform" onSubmit="return validateSearch();" METHOD="POST" ACTION="search_results_lt.asp"> <INPUT TYPE="text" NAME="Search" VALUE="" SIZE="20" > <INPUT TYPE=IMAGE SRC="images/search_button.gif" Name="SearchButton" Value="Submit"> </FORM> **** Thanks for your help, Robin Hi, I've got three buttons on a page and basically all I'm trying to do is put a BACK button as one of the three. But I'm having difficulties getting it to work. Code: <form name="reservationinfo" action="reservationcollected.php" method="post"> <input type="hidden" name="reservationID" value="<? echo $reservationID; ?>"> <center> <table width="400" border="0" cellspacing="5"> <tr> <td><input type="submit" value= "Reservation Collected" class="button" name="submit"></td> <td><input type="submit" value='Cancel Reservation' onclick="reservationinfo.action='admincancelreservation.php'; return true;"></td> <td><input type="submit" value='Back' onclick="reservationinfo.action='history.go(-1)'; return true;"></td> </tr> </table> </center> </form> The solutions Ive been trying either take me to reservationcollected.php OR says history.go(-1) CANNOT BE DISPLAYED. Any ideas? Cheers |
|||||||