|
HTML - Changing Colour On A Button
Hi guys,
im making a site for a client at the minute, i had successfully made it then noticed a glinch when i played it in 'firefox' (yes i to was shocked it wasnt in i.e). Basicly i have an accordian, when a user clicks on say label 1, i need the labels, background colour and text colour to change. Simialrly label 2 will change them to another colour. Now this is how i achieved that: HTML Code: <!-- within the label tag on the accordian i placed the following code to change the required colours when the link is clicked //-->
<a id="titleLink" class="title" href="#" onclick= "body.style.background='#006600'; titleLink.style.color='#663333'; menLink.style.color='#231f20';"><h1>link 1</h1></a>
Now here is the code in its entirety, copy and paste this should work, as long as you have the required .js pages in a folder entitled Script. 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 href="css/testAcc.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>some name here</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- following is a sntarded accordian added in dreamweaver //-->
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<!-- within the label tag on the accordian i placed the following code to change the required colours when the link is clicked //-->
<a id="titleLink" class="title" href="#" onclick= "body.style.background='#006600'; titleLink.style.color='#FFFFFF'; menLink.style.color='#231f20';"><h1>link 1</h1>
</a>
</div>
<div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">
<a id="menLink" class="title" href="#" onclick="body.style.background='#231f20'; titleLink.style.color='#663333'; menLink.style.color='#FFFFFF'; ">link 2</a>
</div>
<div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>
</body>
</html>
Now, in Safari this works great, as it does in i.e and Opera. However when i try it in firefox it dosnt seem to work. I think it has something to do with firefox wanting to mark the links as visited but im unsure. Any ideas why this is happening and how i can avoid it!? any help would be appreciated, im tearing my hair out as the deadlines a-looming! cheers Roamer Similar TutorialsHello everyone. I have a website on which I post programs written in a specific lanuage. I would like to know if there is a way of changing the font colour of words depending on what the word is. Here is an example of one of my programs, you can see the colour scheme. But if you check out the source, you'll see I have had to change the colour of every word except the comments, which is the page default, being grey. Take a look, http://www.jakeselectronics.net/file...decoderasm.php I want to be able to 'store' a list of words in the head, and if that word is typed in the body, change colour to what ever I say. Like have a default of white, but if GOTO is typed, make that blue. My method at the moment is extreamly tendious, Is it clear what I'm trying to do? Thanks, Jake. Hi, I would like to know how I can change the gover colour of a specific link by coding the anchor tag of the link? Here's my site: Click What I want to do is change the hover colour for the Home tag. Thanks, DarkArcher Hi, I have a search form with the following code:# <!-- Begin FusionBot.com site search engine code--> <FORM NAME=fbsearch METHOD=GET ACTION="http://ss021.fusionbot.com/cgi-bin/ss_query"> <INPUT TYPE=text NAME=keys style="height: 18px; width: 100px; background-color:#1E7CC8;<input size="8" SIZE=10> <INPUT TYPE=hidden NAME=sitenbr VALUE="154309449"> <INPUT TYPE="image" src="http://www.freewebs.com/hanifm/search.gif" name="go" value="go" alt="Click to Search"><BR> </DIV> </FORM> <!-- End FusionBot.com site search engine code --> What I want is, is for the form to be like the login area of this site: http://www.pixel2life.com/ if u look at the top right of that site u can see it has the bit with username. I want that same style of the box with the white text inside and with the same border thickness and colour. These are the colours: Inside of the form (background): #1E7CC8 The Border colour: #64A2D6 The boder thickness has to be small like the one on the sie If anyone could do this it would be much appreciated. Thank You Could someone help me with this? When I click on "Log in" after entering Password (12345) it change only "Main Page 1" to "Main Page 2" , I want to change "Column 1" to "Column 2" at the same time too. What should I do? The following are just sample to take a look. Thanks so much. frames.htm HTML Code: <html> <head> <title>Frames</title> </head> <frameset rows="21%,*"> <frame src="top.htm" name="top.htm"> <frameset cols="10%,*"> <frame src="menu1.htm" name="menuarea"> <frame src="logininter.htm" name="pages"> </frameset> </frameset> </html> top.htm HTML Code: <html> <head> <title>Top Frame</title> </head> <body> <h1 align="center">Top Frame</h1> </body> </html> menu1.htm HTML Code: <html> <head> <title>Menu</title> <body> <h1>Column 1</h1> <table> <tr> <td> <a href="menu2.htm" onClick='parent.pages.location.href="logininter.htm"' target="menuarea">Log in</a></td> </tr> <tr> <td><a href="" >Guest</a></td> </tr> </table> </body> </head> </html> menu2.htm HTML Code: <html> <head> <title>Menu</title> <body> <h1>Column 2</h1> <table> <tr> <td><a href="">Message</a></td> </tr> <tr> <td><a href="" >Timetable</a></td> </tr> <tr> <td><a href="" >Appointment</a></td> </tr> <tr> <td><a href="" >Log out</a></td> </tr> </table> </body> </head> </html> logininter.htm HTML Code: <html>
<head>
<title>Main Page</title>
<script type="text/javascript">
function validatePwd(theform){
if(theform.username.value==""){
alert("Please enter user ID")
theform.username.focus()
return false
}
else if(theform.passwd.value==""){
alert("Please enter a password")
theform.passwd.focus()
return false
}
else if(theform.passwd.value !=12345){
alert("Password incorrect")
theform.passwd.focus()
theform.passwd.select()
return false
}
return true
}
</script>
</head>
<body>
<h1>Main Page 1</h1>
<form onsubmit="return validatePwd(this);" id="loginform" action="homepage.htm">
<fieldset>
<legend>Log in</legend>
<p>Please enter your User ID and Password to access</p>
<label for="username">User ID:<input type="text" name="username" id="username" tabindex="1"></label>
<label for="passwd">Password:<input type="password" name="passwd" id="passwd" tabindex="2"></label>
<label for="submit">
<input type="submit" class="submit" value="Log in"/></label>
<label for="reset">
<input type="reset" class="reset" value="Reset" /></label>
</fieldset>
</form>
</body>
</html>
hompage.htm HTML Code: <html> <head> <title>Home Page</title> </head> <body> <h1>Main Page 2</h1> <div> <p>* Option 1</p> <p>* To Option 2</p> <p>* To Option 3</p> </div> </body> </html> Hey there, I've got a problem with my BG colour on a very simple page. I've uploaded this page he http://www.alastairq.co.uk/s-gaming The Web page looks like it should in FireFox 2 but in IE 6, the colour is completely wrong. Could anyone help me? Thanks, alastairq How to change the color of a certain link in the page (only one link) from the blue color to another one? Help please. Thanks in advance... Any idea how to set the backgorund of your website to a certain colour? Thanks, Narc Here's my code: HTML Code: <div align="center" onmouseover="this.style.backgroundColor='#FFFFFF'; this.style.cursor='aero_arrow'; this.style.color='#000000';" onmouseout="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF';" style="width: 150px; height: 20px;">Home</div> =(The code is on different lines because it doesn't show a scrollbar when it's all on one line!)= This is in a table to create links as text buttons. But when I load / refresh the page, the text is black and when I hover over and away, it stays white. Can anybody fix this so that the text is white when you first load the page? Here's my code: HTML Code: <div align="center" onmouseover="this.style.backgroundColor='#FFFFFF'; this.style.cursor='aero_arrow'; this.style.color='#000000';" onmouseout="this.style.backgroundColor='#000000'; this.style.color='#FFFFFF';" style="width: 150px; height: 20px;">Home</div> =(The code is on different lines because it doesn't show a scrollbar when it's all on one line!)= This is in a table to create links as text buttons. But when I load / refresh the page, the text is black and when I hover over and away, it stays white. Can anybody fix this so that the text is white when you first load the page? Hi all, Ive been using the X11 colour set found on this link below, and it contains some interesting colours but would it be possible to use more colours than shown? http://en.wikipedia.org/wiki/Web_colors I was looking to make a table with 20 shades of blue as different backgrounds, would that be possible for example? Thanks! how do i change the border colour in a style sheet? i added it to the body parts but it didn't change =/ .. this is my style sheet (the border colour part isn't there now i'm hoping someone can add it in the right place) Quote: /* CSS Document */ body{ scrollbar-arrow-color: #AD33FF; scrollbar-3dlight-color: #EFEFEF; scrollbar-highlight-color: #EFEFEF; scrollbar-face-color: #EFEFEF; scrollbar-shadow-color: #EFEFEF; scrollbar-darkshadow-color: #EFEFEF; scrollbar-track-color: #EFEFEF; } a:visited { color: #AD33FF; text-decoration: none; } a:active { color: #AD33FF; text-decoration: none; } body { background-color: #494949; } body,td,th { color: #9D9D9D; font-family: Tahoma; font-size: 10px; } a:link { color: #AD33FF; text-decoration: none; } a:hover { color: #cccccc; text-decoration: none; } Is there a simple way for me to change the colour of text that you put in a text box? Hi, I have this website: http://www.dmucomputing.co.uk/ The problem that I am currently having is that the background colour on the navigation panel on the left hand side of the screen does not follow all the way to the bottom of the page. I have checked it in Firefox and IE, but am having the same problem on both. Can anyone advice please? Thank you in advance. I'm trying to display some VB code in my webpage. I can keep the code structure using the pre and code tags. Is there any way I keep the color displayed in the code editor (vbsedit, textpad, ultraedit ... etc) ? Hi All, I was wondering of anyone knows how to find out the html colour code of text from a particular website. For example if I see text on a site and I like the colour, I want to be able to find out how to match that colour with a html code. Thankyou in advance I'm quite new to this and used a tag generator thing, how do I make the background black and has anyone got any other tips to make this look more attractive? Here is the code: HTML Code: <p style="text-align: center;"><span style="background-color: rgb(0, 0, 0);"><br></span></p> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);">if this newsletter is not displaying properly, click <a title="Sternberg Clarke New Talent - February 2010" href="http://www.scflyers.com/newsletterfeb10.html" target="_blank">here</a> to see it in its full splendour</span></span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="background-color: rgb(255, 255, 255);"><br></span></span></span></p> <table style="border: 4px solid rgb(244, 249, 249); width: 751px; height: 604px; background-color: rgb(255, 255, 255);" align="center" border="4" cellpadding="0" cellspacing="6"> </table> <table style="border: 0pt solid rgb(0, 0, 0); width: 600px; height: 183px;" align="center" border="0" cellpadding="0" cellspacing="0" frame="border"> <tbody> <tr> <td style="width: 20px; height: 20px;" colspan="8"> <p><img style="border: 1px solid black;" title="sclogo" src="http://www.scflyers.com/htmlfiles/logo_600px.gif" alt="sclogo" width="600"></p> </td> </tr> <tr> <td colspan="8"> <p style="text-align: center;">performers of the month - March 2010</p> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">the langley sisters</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="Langley Sisters" src="http://www.scflyers.com/langley-sisters_250px.jpg" alt="Langley Sisters" width="250" height="238"></p> <p style="text-align: center;"> <object style="width: 250px; height: 206px;" data="http://www.youtube.com/v/1uSKPIZaZtg&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/1uSKPIZaZtg&feature"> </object> </p> </td> <td> <p style="padding-left: 30px;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis. </span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td> <p> </p> <p> </p> </td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">puncture kit</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td><br></td> <td colspan="5" valign="middle"> <p style="text-align: center;"><img style="border: 1px solid black;" title="pk" src="http://www.scflyers.com/puncture_250px.jpg" alt="puncture kit" width="250" height="238"></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/wCdauhGajBE&feature" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/wCdauhGajBE&feature"> </object> </p> <p> </p> <p> </p> <p> </p> <p> </p> </td> <td style="padding-left: 30px;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p><span style="font-size: small;"><br></span></p> </td> <td style="width: 20px; height: 20px;"><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td> </td> <td style="text-align: center;" colspan="6"> <p><span style="text-decoration: underline;"><span style="font-size: x-large;">cash cows</span></span></p> <p><span style="text-decoration: underline;"><span style="font-size: x-large;"><br></span></span></p> </td> <td> </td> </tr> <tr> <td> </td> <td colspan="5"> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong><img style="border: 2px solid black;" title="cashcows" src="http://www.scflyers.com/cashcows_250px.jpg" alt="cashcows" width="250" height="238"></strong></span></span></p> <p style="text-align: center;"> <object data="http://www.youtube.com/v/IvTHGp8Yui8" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/IvTHGp8Yui8"> </object> </p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> <p style="text-align: center;"><span style="font-family: helvetica;"><span style="font-size: medium;"><strong> </strong></span></span></p> </td> <td style="padding-left: 30px;" align="left"> <p style="text-align: justify;"><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"> </p> <p style="text-align: left;"><span style="font-size: small;"><br></span></p> </td> <td><br></td> </tr> <tr> <td colspan="8"> <hr> </td> </tr> <tr> <td style="text-align: center;" colspan="8"> <p><span style="font-size: x-large;"><span style="text-decoration: underline;">kate mlynar</span></span></p> <p><span style="font-size: x-large;"><span style="text-decoration: underline;"><br></span></span></p> </td> </tr> <tr> <td> </td> <td colspan="5"><img title="km" src="http://www.scflyers.com/km_250px.jpg" alt="km" width="250" height="238"> <p> <object data="http://www.youtube.com/v/tz8BvSiop5Q" type="application/x-shockwave-flash" width="250" height="206"> <param name="src" value="http://www.youtube.com/v/tz8BvSiop5Q"> </object> </p> </td> <td style="padding-left: 30px; text-align: justify;" valign="top"> <p><span style="font-size: small;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu massa lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed commodo nulla non eros lobortis sed convallis ante pharetra. Nulla porta sollicitudin enim, quis egestas est elementum nec. Sed mollis consequat magna, eget volutpat turpis ultrices volutpat. Integer eu odio felis. Praesent ac felis eu lacus pellentesque fermentum. Morbi sit amet diam augue. Vivamus imperdiet placerat nulla accumsan ultrices. Nullam volutpat porttitor malesuada. Sed quis velit sit amet turpis lobortis accumsan a a ipsum. Donec at tortor felis.</span></p> </td> <td> </td> </tr> <tr> <td><img title="bottomleft" src="http://www.scflyers.com/htmlfiles/bl.gif" alt="bottomleft"></td> <td colspan="5"><br></td> <td> </td> <td><img title="bottomright" src="http://www.scflyers.com/htmlfiles/br.gif" alt="bottomright" width="20" height="20"></td> </tr> </tbody> </table> <p style="text-align: center;"><span style="color: rgb(255, 255, 255);"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;">click <a href="mailto:sarah@sternbergclarke.co.uk?subject=unsubscribe"> here</a> to unsubscribe</span></span></span></p> <p style="text-align: center;"><span style="font-size: xx-small;"><span style="font-family: verdana,geneva;"><span style="color: rgb(0, 0, 0);"><br></span></span></span></p> <p> </p> So i'm trying to change some of my default link colours, but everything that I have tried so far hasn't worked. Right now, I have this piece of code in my body tag. HTML Code: link="#00CC33" I don't know if it is correct or not, but how do I change the link colour? I've tried searching, but have had no luck at all. I'm designing a website in html for a college project. I'm having a bit of trouble so hopefully someone here can help me. At the moment I have a white square on the homepage that is a link. I was hoping that when I have visited the page it links to and return to the homepage this square will be a different colour. I don't know if this is even possible but I would appreciate any advice anyone can give me. Thanks Can somebody please explain to me why when I enter the background colour <body bgcolor="blue"> it just wipes out everything on my page from text to photos. And yes I'm a complete novice Hey, i need some help. im making a little web page where you can choose what colour you want the background to be by clicking on a little coloured square. can someone please help me with the coding for this, |
|||||||