|
HTML - Button State Question
I have created a menu on a webpage, and added a rollover effect to it. It's working great. But here's what I would like to do now.
When you click on one of the buttons in the menu, and it takes you to that page, I want the button you clicked to stay lit up like it appears in the MouseOver effect. And then restore itself when you click on another menu button. I've seen this used on a lot of sites, so is there a simple way for me to do this? Or is this only possible in something like CSS? Similar Tutorialsyea, i know it makes me sound like the biggest noob ever but i am so ive put together a few pages with nothing but a list in <ul> tags and i somehow managed to make them horizontal, but now...i want it to be vertical and ive gone over every single line and not been able to work it out so i was hoping maybe you guys could help me out heres the css.... Code: body {
background-color: #e3e3db;
background-image: url(bg.gif);
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin: 0;
padding: 0;
}
#menu {
}
#menu li {
float: left;
height: 28px;
margin: 0 5px 0 0;
white-space: nowrap;
}
#menu li strong, #menu li a {
float: left;
height: 22px;
padding: 6px 16px 0 22px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -10px -28px;
color: #FFFFFF;
font-weight: normal;
text-decoration: none;
/* hide overflowing text */
max-width: 290px;
overflow: hidden;
text-overflow: ellipsis;
}
#menu li span {
float: left;
height: 28px;
width: 6px;
background-repeat: no-repeat;
background-image: url(tabs.png);
background-position: -4px -28px;
}
#menu li.selected strong, #menu li.selected a {
background-position: -10px 0;
color: #000000;
font-weight: bold;
}
#menu li.selected span {
background-position: -4px 0;
}
#menu li:hover strong, #menu li:hover a {
background-position: -10px -56px;
}
#menu li:hover span {
background-position: -4px -56px;
}
#menu li.selected:hover strong, #menu li.selected:hover a {
background-position: -10px 0;
}
#menu li.selected:hover span {
background-position: -4px 0;
}
-thanks in advance The button in the upper right of this page http://www.hindbrain.net/ex10.php uses an image, home2.png, which is 90x90 and has a transparent background. Yet it displays as shown (I'm using firefox). The background is white, and it doesn't fit. How do you get it to display correctly (centered and transparent background)? Edit: I got it to center by setting the border to 0px. The transparency is still not working. thanks, William Hey guys. Is it possible to assign a value to a radio button such as a large section of text which I have an id to. So for instance my text is <font id="someText">Words</font> I want my radio button value to correspond with that. Anyone have any ideas? -Tim Here is my code: Code: <!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" dir="ltr" lang="en"> <head> <title>Prospective Student Database</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> </head> <body> <form action="insert.php" method="post"> <input type="radio" name="gender" value="1">Male </form> </body> </html> I am trying to follow the W3C standard, which I put in the W3C HTML validator. It keeps giving me a error of the radio button should end with '/>' instead of '>'. Like this: Code: <input type="radio" name="gender" value="1"/>Male But I checked the W3C recommendation. Even their recommendation on the radio button doesn't end with '/>' The recommendation is he http://www.w3.org/TR/html4/interact/forms.html The first example already showed. What is the problem? Thanks. Hello, First off let me say thanks for checking this posting out. I am sort of stumped on this one however. My question is I have an inline frame that is holding data from a txt file. What I would like to do is take the data the inline frame is displaying and copy it to the clipboard using a button. Below are links to the images and the code I am using... Bascially you see the copy button, I want to click that and it copy the text thats in the inline frame to the clipboard so I can paste it elsewhere, like in word (just an example) Code: <html>
<head>
<title>SCWC Responces</title>
<style>
body {
margin: 20px;
background: #eee;
}
iframe {
width: 700px;
height: 300px;
border: 1px solid #ccc;
background: #fff;
}
</style>
<script language="JavaScript">
<!--
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
</head>
<body onload="FP_preloadImgs(/*url*/'button13.jpg',/*url*/'button14.jpg')">
<p align="left">Please Choose The Appropriate Response :</p>
<ul>
<li><a target="show_file" href="SCWC_NO_SUPPID.txt">No 5-Digit Supplier Code</a></li>
<li><a href="NO_INVALID_SPONSOR.txt" target="show_file">Ticket Reject;Invalid Sponsor</a></li>
<li><a href="2ND_LEVEL_SUBMISSION.txt" target="show_file">2nd Level General Responce</a></li>
</ul>
<iframe name="show_file" width="844" height="300"></iframe>
<p>
<img border="0" id="img1" src="button12.jpg" height="20" width="100" alt="Copy" onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button13.jpg')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button12.jpg')" onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button14.jpg')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button13.jpg')" fp-style="fp-btn: Brick Column 9" fp-title="Copy"></p>
</body>
</html>
-WinUser2003 Hello, I am new at web design, and frustrated by a Submit button constantly opening a new window instead of moving on in the current window. When coming to this forum to look for answers, I found a Submit button I then researched...and now I am even more confused! There's some code in the screen you see right after you log in, that looks like this: Quote: <script type="text/javascript"> <!-- document.write('<div style="margin-top:0px">'); document.write('<input type="submit" class="button" value=" Proceed " accesskey="s" onclick="window.location=\'http://www.htmlforums.com/f-html-xhtml-4.html/\'; return false" />'); document.write('</div>'); //--> </script> Clicking Submit does indeed move you on within the same window, but my questions a 1. How does this work when...it appears to be commented out! Note the <!-- and -->! And if these aren't commenting code out...then what are they there for? 2. What do all the forward and back slashes mean around the address? (I'm curious about the backslash right before the address, and then the forward and backslash right next to each other afterward) 3. I copied this code into my own page kind of like so: Quote: document.write('<input type="submit" class="button" value="Submit" onclick="window.location=\'newpage.html/\'; return false" />'); Every single time, clicking the button results in a white "This page cannot be displayed" screen--but then refreshing that screen causes the right page to come up! Does anyone know why it won't work the first time? Thanks in advance for any help that anyone can provide! Hey, I'm jst starting to learn html and I was someone could give me an example of how to create a a simple form with 2 input fields which are set to a value say "hello" in first field and "World" in second field when the button is clicked. Thanks Hi, i didnt know where to put this because I've got a problem with the CSS too. All the tutorials ive seen on the net require a "ordered/unordered list" to make a css menu. my site is a lot of images put together using divs, and then each relevant part included in a php file called index.php now i would like to have a menu button changed with a button with a tick on it when clicked to show the active state. here is my html with all the images put in order, the four menu button are in there home, events, donations, bhajans HTML Code: <!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>
<link rel="stylesheet" href="styles.css" type="text/css">
<title>|Youth Seva Group|</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="background-color:#FFFFFF;">
<div id="container">
<div id="sideLeft_">
<img id="sideLeft" src="images/sideLeft.jpg" width="79" height="768" alt="sideleft" />
</div>
<div id="krishna_">
<img id="krishna" src="images/krishna.jpg" width="155" height="227" alt="Krishna" />
</div>
<div id="logo_">
<img id="logo" src="images/logo.jpg" width="597" height="138" alt="Logo" />
</div>
<div id="hanuman_">
<img id="hanuman" src="images/hanuman.jpg" width="175" height="227" alt="Hanuman" />
</div>
<div id="sideRight_">
<img id="sideRight" src="images/sideRight.jpg" width="79" height="768" alt="sideright" />
</div>
<div id="ysg-06_">
<img id="ysg_06" src="images/ysg_06.gif" width="1" height="768" alt="" />
</div>
<div id="saiBaba_">
<img id="saiBaba" src="images/saiBaba.jpg" width="78" height="89" alt="SaiBaba" />
</div>
<div id="home1">
<a href="index.php"><img class="current-home" id="home1" src="images/home_off.gif" alt="Home"/> </a>
</div>
<div id="om_">
<img id="om" src="images/om.jpg" width="131" height="76" alt="Om" />
</div>
<div id="ysg-10_">
<img id="ysg_10" src="images/ysg_10.gif" width="1" height="76" alt="" />
</div>
<div id="donations_">
<a href="donations.php"><img id="donations" src="images/donations.gif" width="151" height="25" alt="Donations" /></a>
</div>
<div id="ysg-12_">
<img id="ysg_12" src="images/ysg_12.gif" width="85" height="89" alt="" />
</div>
<div id="events1">
<a href="events.php"><img id="events1" src="images/events_off.gif" width="151" height="22" alt="Events" /> </a>
</div>
<div id="bhajans_">
<a href="bhajans.php"><img id="bhajans" src="images/bhajans.gif" width="151" height="22" alt="Bhajans" /></a>
</div>
<div id="ysg-15_">
<img id="ysg_15" src="images/ysg_15.gif" width="151" height="29" alt="" />
</div>
<div id="ysg-16_">
<img id="ysg_16" src="images/ysg_16.gif" width="151" height="29" alt="" />
</div>
<div id="ysg-17_">
<img id="ysg_17" src="images/ysg_17.gif" width="6" height="13" alt="" />
</div>
<div id="ysg-20_">
<img id="ysg_20" src="images/ysg_20.gif" width="6" height="13" alt="" />
</div>
<div id="lineLeft_">
<img id="lineLeft" src="images/lineLeft.gif" width="239" height="5" alt="Line Left" />
</div>
<div id="lineRight_">
<img id="lineRight" src="images/lineRight.gif" width="266" height="5" alt="Line Right" />
</div>
</body>
</html>
this is my css Code: #container {
position: relative;
text-align: center;
width: 1068px;
height: 0px;
margin: 0px auto;
}
#sideLeft_ {
position:absolute;
left:0px;
top:0px;
width:79px;
height:768px;
}
#krishna_ {
position:absolute;
left:79px;
top:0px;
width:155px;
height:227px;
}
#logo_ {
position:absolute;
left:234px;
top:0px;
width:597px;
height:138px;
}
#hanuman_ {
position:absolute;
left:831px;
top:0px;
width:175px;
height:227px;
}
#sideRight_ {
position:absolute;
left:1006px;
top:0px;
width:79px;
height:768px;
}
#ysg-06_ {
position:absolute;
left:1085px;
top:0px;
width:1px;
height:768px;
}
#saiBaba_ {
position:absolute;
left:234px;
top:138px;
width:78px;
height:89px;
}
#home1 a:active, .current-home {
position:absolute;
left:312px;
top:138px;
width:151px;
height:25px;
background-position: top;
background:url(home_on.gif);
}
#events1 a {
position:absolute;
left:312px;
top:163px;
width:151px;
height:22px;
background-position: top;
}
#om_ {
position:absolute;
left:463px;
top:138px;
width:131px;
height:76px;
}
#ysg-10_ {
position:absolute;
left:594px;
top:138px;
width:1px;
height:76px;
}
#donations_ {
position:absolute;
left:595px;
top:138px;
width:151px;
height:25px;
}
#ysg-12_ {
position:absolute;
left:746px;
top:138px;
width:85px;
height:89px;
}
#bhajans_ {
position:absolute;
left:595px;
top:163px;
width:151px;
height:22px;
}
#ysg-15_ {
position:absolute;
left:312px;
top:185px;
width:151px;
height:29px;
}
#ysg-16_ {
position:absolute;
left:595px;
top:185px;
width:151px;
height:29px;
}
#ysg-17_ {
position:absolute;
left:312px;
top:214px;
width:6px;
height:13px;
}
#aboutus_ {
position:absolute;
left:318px;
top:214px;
width:211px;
height:24px;
}
#resposibilities_ {
position:absolute;
left:529px;
top:214px;
width:211px;
height:24px;
}
#ysg-20_ {
position:absolute;
left:740px;
top:214px;
width:6px;
height:13px;
}
#lineLeft_ {
position:absolute;
left:79px;
top:227px;
width:239px;
height:5px;
}
#lineRight_ {
position:absolute;
left:740px;
top:227px;
width:266px;
height:5px;
}
#logIn_ {
position:absolute;
left:79px;
top:232px;
width:111px;
height:33px;
}
#register_ {
position:absolute;
left:190px;
top:232px;
width:112px;
height:33px;
}
#ysg-25_ {
position:absolute;
left:302px;
top:232px;
width:16px;
height:27px;
}
#ysg-26_ {
position:absolute;
left:740px;
top:232px;
width:266px;
height:49px;
}
#ysg-27_ {
position:absolute;
left:318px;
top:238px;
width:422px;
height:21px;
}
#ysg-28_ {
position:absolute;
left:302px;
top:259px;
width:10px;
height:22px;
}
#sayings_ {
position:absolute;
left:312px;
top:259px;
width:76px;
height:22px;
}
#ysg-30_ {
position:absolute;
left:388px;
top:259px;
width:352px;
height:22px;
}
#ysg-31_ {
position:absolute;
left:79px;
top:265px;
width:48px;
height:16px;
}
#memberBenefits_ {
position:absolute;
left:127px;
top:265px;
width:114px;
height:11px;
}
#ysg-33_ {
position:absolute;
left:241px;
top:265px;
width:61px;
height:16px;
}
#ysg-34_ {
position:absolute;
left:127px;
top:276px;
width:114px;
height:5px;
}
#content_ {
position:absolute;
left:79px;
top:281px;
width:927px;
height:487px;
}
a:active
{
outline: none;
}
a:focus
{
-moz-outline-style: none;
}
img{
border:0px;
}
and this is the main php file with the includes. PHP Code: <?php include 'headerplusmenu.php'; ?> <?php include 'login.php'; ?> <?php include 'sayings.php'; ?> <?php include 'main.php'; ?> <?php include 'homesubmenu.php'; ?> <div id="content_"> <p>Homepage</p></div> I'm a designer with a working but by no means expert familiarity with html and css. My products are bundles that include photo slideshows, video and audio clips, text and links to pdf and tif files. They are distributed on dvds and thumb drives. I've been using Flash to assemble them. I understand that Flash is on the way out, at least insofar as HTML 5 is already able to do the many of the same things without the need of a proprietary browser add-in. I understand it is already capable of doing everything I currently do with Flash. My question: which if any of the current browsers are capable of performing all of these functions? I currently bundle Flash Player with my products, but I'd much rather bundle a browser. Thanks in advance, P 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 Can you please help me? I am making a website in MS SharePonit designer 2007. The site will be in 2 languages, Croatian and English. On the home page of the site I have put two radio buttons to give the choice to go to English version or Croatian version. And below those 2 radio buttons i want to put a button with text "ENTER SITE". But I don't know how to do this: If the Croatian radio button is checked, a click on the "ENTER SITE" must take you to the Croatian version of the site, and if English radio button is checked, click on "ENTER SITE" must take you to the English version. Can you please tell me how to do that? I need html code of an ad with close button and I also need html code of floating ad with close button.If someone knows how to do it , please post html. Hello everyone, I'm new here. I am having a problem making a button (well not a problem, but it is not how I would like it.) I have created a button using 2 images: Code: #navbar ul{
float:left;
list-style: none;
}
#navbar ul li{
display:block;
float:left;
padding:10px 0 10px 10px;
margin:10px 0 10px 10px;
max-width:120px;
min-width: 50px;
background:url('images/button-left.png') no-repeat scroll top left;
}
#navbar ul li a{
display:block;
color: #fff;
text-decoration:none;
padding:10px 15px 10px 5px;
margin: -10px 0 0 -2px;
font-weight:bold;
text-align:left;
background: transparent url('images/button-right.png') no-repeat scroll top right;
}
So, it works, and I could use it, but only the right image is the link, so I was wondering how I could also make the left image the link too. (btw I am sorry if the code is a mess, I usually tidy it up when I have finished ) I need a button that will execute a chatbox aside from the plain Brown block with words. Code: <p>Welcome to the HackersLounge! Enter a username and click connect to start chatting!</p><p><applet code="EIRC" archive="http://centralchat.net/eirc/EIRC.jar, http://centralchat.net/eirc/EIRC-gfx.jar" width="620" height="400"><param name="mainbg" value="#e0e5f4" /><param name="mainfg" value="#000000" /><param name="textbg" value="#FFFFFF" /><param name="textfg" value="#000000" /><param name="selbg" value="#00007F" /><param name="selfg" value="#FFFFFF" /><param name="server" value="centralchat.net" /><param name="channel" value="#HackersLounge" /><param name="titleExtra" value=" - CentralChat.net" /><param name="username" value="java" /><param name="realname" value="CentralChat Java Chat" /><param name="nickname" value="CCuser????" /><param name="login" value="0" /><h2>CentralChat Java Chat</h2><p>Sorry- Java is required to use this chat box. You can use the <a href="http://www.centralchat.net/chatrooms/cgiirc.php?c=HackersLounge">alternate chat</a> instead. Hi i need some help with this code Code: HTML_print("<form name=\"kas\" method=\"POST\" action=\"/\">");
HTML_print("<input type=\"submit\" name=\"%\" id=\"kas\" value=\"LED\">");
HTML_print("</form>");
this is basic button after which i pressd i need send data % to server but at the moment it sends % after page is loaded how to make this work that % woud be send just after button LED is pressed?? i am totaly beginer in html this is for my project with Arduino controled robot i know i have an old thread titled "Please Read This" but that has gone off the topic now and im wondering if anyone can help me with a new problem im making a feedback form and have had tons of help from html forums but i got 1 more little thing i need 2 buttons to do this Lock/Unlock: Toggles Readonly on and off Set Record: Makes the field Read Only and makes the button disappear any help? Hey everyone, i'm a new member here hoping you can help me out please... I'm creating a basic game in Dreamweaver for a project and in this game, i have 25 questions and i have included a Skip button. I would like to limit the number of times this Skip button can be clicked to 5 so the user would have to attempt at least 20 questions and my questions are, is this possible? and if so, how do i do it? (I would preferably like the code to be HTML) Hope you can help me, thanks in advance. Rob Hey! I am new to this site... So if this is in the wrong section, I'm sorry! Ok, I am kinda new to HTML and I am not too sure about some stuff. The thing I am having trouble with is buttons... I have little graphic things for my buttons... and I can't figure out how to make it so you can click on it and it will go to another window... So, can somebody help? Thanks in advance! Hi everyone, i have a site at www.everybody-ebooks.com, i would like to make a button at the homepage.I dont know what is the name of this button. What i'm trying to do is to make a following button "Request a book / ebooks" and it will follow on the screen even the visitor scroll up or down. So the button will stay on screen even scrolled. I hope anyone here will able to tell me what is the name for that button so that i can start my search on google or hopefully some guide where to start. Thank you. I want a link on the button. Means in my site I have a button Register and I want a link on the Button. How it could be possible. Thanks in advance |
|||||||