|
CSS - Need Help With Image Change Dependent On Domain Name
Hello all, I have a problem that i have been searching to solve for the last few days and whilst i have found out alot of info i have not been able to find the answer. I know little css but do use some.... im a beginner so be gentle on me
A friend of mine has 2 urls, ie: 2 servers... one for .co.uk and one for .com, the website is identical on both sites so any changes made to the html can be uploaded to both sites simultaneously to avoid any problems etc. The .co.uk site has just been made able to accpet Paypal but the .com site wont be changed for many months yet. What i need to achieve is a clickable banner image at the side that can change depending on what site ie .co.uk or .com that the user is on, so if they were on .com it would show a clickable image stating to go to .co.uk site if you want to pay by paypal and if on the .co.uk site it would just show an image saying we now accept Paypal... Whilst i understand what i need to do this i cant work out how to do it.. help would be appreciated. My idea = 1. get website host name 2.if not on this site display image 1 3.if on this site display image 2 seems simple but i would like it to use code like i use already in a div that i am displaying pictures with atm. Like below. <div style="Z-INDEX: -3; POSITION: absolute; WIDTH: auto; HEIGHT: 60px; TOP: 200px; right: 20px"> <a style="display:block;height:60px;width:150px;" href="removedurl.co.uk" alt="Paypal on removedurl.co.uk" title="Paypal Accepted"><img src="images/paypalother.gif" /></a><br/> </div> If anyone has any idea how to do this please help before i go bald Similar TutorialsI have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help! Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!) Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text. What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at: www.markmcm.co.uk/test/test.html The CSS is as as follows: Code:
/*
* Page Stylesheet
*/
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
border:0; margin:0; padding:0;
height: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#container {
margin-left: auto;
margin-right: auto;
min-height: 100%;
width: 936px;
}
* html #container {
height: 100%;
}
#content {
float:left;
position: relative;
height: 528px;
width: 936px;
z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
position: absolute;
float: left;
display: block;
width: 312px;
height: 176px;
}
.miniscreen1 {
top: 0;
left: 0;
}
.miniscreen2 {
top:0;
left: 312px;
}
.miniscreen3 {
top: 0;
left: 624px;
}
.miniscreen4 {
left: 0;
top:176px;
}
.miniscreen5 {
left: 312px;
top:176px;
}
.miniscreen6 {
left: 624px;
top:176px;
}
.miniscreen7 {
left: 0;
top:352px;
}
.miniscreen8 {
left: 312px;
top:352px;
}
.miniscreen9 {
left: 624px;
top:352px;
}
.info {
height: 30px;
top:3px;
left: 40px;
width: 265px;
float: left;
position: absolute;
}
.infobar {
left:0px;
position: absolute;
top: 140px;
width: 312px;
height: 36px;
outline: none;
color:#000;
background: url("data/infobar.png") no-repeat 0 0;
z-index: 650;
}
.infobar:hover {
background-position: 0 -36px;
outline: none;
color:#fff;
}
#infobar span {
display: none;
outline: none;
}
.clip_title {
outline: none;
font-size: 85%;
font-weight: 700;
vertical-align: top;
text-align: left;
}
.clip_sub {
outline: none;
height: 13px;
font-size: 80%;
line-height: 13px;
font-weight: 700;
vertical-align: top;
text-align: left;
}
And the HTML is: 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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <meta name="description" content=" " /> <meta name="keywords" content=" " /> <meta name="generator" content=" " /> <link rel="stylesheet" type="text/css" href="page.css" media="screen" /> </head> <body> <div id="container"> <div id="content"> <span class="miniscreen1"> <a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen2"> <a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen3"> <a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen4"> <a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen5"> <a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen6"> <a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen7"> <a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen8"> <a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> <span class="miniscreen9"> <a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0"> <span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a> </span></span> </div> </div> </body> </html> There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!) I have created a bit of CSS similar to the way faqs are expanded and contracted by clicking. It constitutes a list of maxims some of which are further expanded and some of which are not. An example of this is displayed here, http://yogaredux.meripol.net/node/12. What I am looking for is some kind of CSS which is content depended. If the answer part is filled I want it to have a different colour from when it is empty. Is there any kind of Javascript, CSS or a combination of the two that can implement it? I developed a site years ago using JavaScript for a roll-over function. Now the client is having issues with customers not being able to use the roll-over function because they have Java Script disabled. Is it possible to do this using css? For an example, see this page: chellatextiles.com/Textfab/cocotweed.html Rollover a color thumbnail and it replaces the fabric details. There are about 500 thumbnails through the site that I would need to change. I'm having a mental block this should be really easy. I have an image rollover set up a:hover.deb {background:url(images/deb.jpg);} but I also want it to display some text elsewhere on the page many thanks Hi, Is it possible to change the default button image so that the same image can be used even when different text is set as the value of the button? I mean, can I change the button image in a way, that it will appear correctly when the value is set to "OK" and also when the value is set to "Much Longer Value"? Thanks and Regards, Sim085 I'm still relatively new to this whole homepage thing. I was wondering if its possible using only CSS to make this happen: i have a bunch of headings along the top of a page that a person can click on. Below is a box with an image. I would like a different image to appear in that box when a differnt heading above is hovered over. Is this javascript stuff ?:S (havnt started learning that yet) tanks, matt. Hello; I'm trying to create a dropdown nav menu which drops down into in three levels. When I put a mouseover on my main nav, it changes it's image. However when I move away from it to a lower level of the menu it changes back. I want to main nav to stay the same image when I move down to lower levels of the menu. Thank you Here is my code: Code: body {
font-family:verdana, arial, helvetica, sans-serif;
font-size:76%;
color:#000;
padding:0;
border:0;
margin:0;
background:#fff repeat-x 0 0px;
text-align:left;
}
.clear {
clear:both;
}
.play {
font-family:"trebuchet ms", sans-serif;
}
.hiddenfromview {
display:none;
}
/* control mouseover functions for main menu navs */
#menu1 a {
width:129px;
background: url("1.jpg") 0 0 no-repeat;
}
#menu1 a:hover {
display:block;
background: url("1-1.jpg") 0 0 no-repeat;
}
#menu2 a {
width:129px;
background: url("2.jpg") 0 0 no-repeat;
}
#menu2 a:hover {
display:block;
background: url("2-1.jpg") 0 0 no-repeat;
}
#menu3 a {
width:129px;
background: url("3.jpg") 0 0 no-repeat;
}
#menu3 a:hover {
display:block;
background: url("3-1.jpg") 0 0 no-repeat;
}
#menu4 a {
width:129px;
background: url("4.jpg") 0 0 no-repeat;
}
#menu4 a:hover {
display:block;
background: url("4-1.jpg") 0 0 no-repeat;
}
#menu5 a {
width:127px;
background: url("5.jpg") 0 0 no-repeat;
}
#menu5 a:hover {
display:block;
background: url("5-1.jpg") 0 0 no-repeat;
}
#menu6 a {
width:129px;
background: url("6.jpg") 0 0 no-repeat;
}
#menu6 a:hover {
display:block;
background: url("6-1.jpg") 0 0 no-repeat;
}
.menu {
font-size:0em;
position:relative;
z-index:100;
border-right:1px solid #000;
}
/* hack to correct IE5.5 faulty box model */
* html .menu {
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none;
font:arial;
font-weight:550;
height:40px;
border:0px solid #b17323;
border-width:0px 0 0px 0px;
padding-left:0px;
line-height:0px;
}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#798fb1 url(arrow1.gif) bottom right no-repeat;
}
/* style the second level hover */
.menu ul ul a.drop:hover {
background:#ffffff url(arrow1.gif) bottom right no-repeat;
}
.menu ul ul :hover > a.drop {
background:#ffffff url(arrow2.gif) bottom right no-repeat;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#ffffff;
color:#3d4058;
width:160px;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#de9639;
color:#ffffff;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:25px;
left:0;
border-top:1px solid #798fb1;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:25px;
t\op:25px;
}
/* position the third level flyout menu */
.menu ul ul ul {
left:126px;
top:-1px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-60px;
}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {
position:absolute;
top:0;
left:0;
border-collapse:collapse;
;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#798fb1;
color:#ffffff;
height:auto;
line-height:1em;
padding:5px 10px;
width:105px;
border-width:0 1px 1px 1px;
}
/* style the second level links */
.menu2 ul ul a, .menu2 ul ul a:visited {
background:#f4eed3;
color:#b17323;
height:auto;
line-height:11em;
padding:5px 10px;
width:100px;
border-width:0 1px 1px 1px;
}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {
width:100px;
w\idth:100px;
}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover {
color:#3d4058;
background:#ffffff;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#3d4058;
background:#ffffff;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul {
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul {
visibility:visible;
}
I want an image gallery like this one: http://www.webreference.com/program...ples/twelve.htm only I want the thumbnails to appear in a single line, UNDER the image. There would be far fewer thumbnails so it would only be about 300px wide, but I want the image to appear above, and not to the left. I tried messing with the values but now I'm confused and I don't want to mess with values that don't need to be messed with On my site I have a list of links on the left side. I keep them in an unordered list, and set the background image using css. I want to change the image on rollover. In Firefox I can just change it putting by :hover after an li in the style sheet as if it were an anchor, but IE won't accept that, and for some reason I can't get the style to change using javascript either. Any help appreciated- I know it's something really simple that I'm just not seeing. IE also won't display the hand cursor, but if I figure out how to get the image to change I can do the hand on my own at the same time. Firefox does everything right, so you can use that to see what i'm going for. Hi. I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover? I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link. URL URL Thanks for any help anyone can offer Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- Hi guys, Is it possible in CSS to change the colour / image of the page background dynamically. So that as you hovered over different links , the background of the page changed. I know you can do this in JS but how would you do it in CSS? I was kinda thinking something like: a.linkname:hover, a.linkname:focus body { background-color:#00FF00; } but thats just a guess and doesnt work lol. Many Thanks, Alvin. Odd problem here...If I type my website address in the address bar and precede it with the "www" (ex: www . mydomain . com), the CSS is not being applied, however, if I omit the www, CSS works fine. This is only a problem in FireFox 3.5.2. Any ideas whatsoever? Hi, I have a question about setting up the Body background-image via a linked external stylesheet. I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG. When I embed the following in my index.html, I see the background show up: ** inside index.html file ** <BODY STYLE="background-image: url(test.JPG);"> blah </BODY> BUT, when I define my background in the externally linked myStyle.css file, the background does not load: ** inside myStyle.css file ** BODY { background-image: url(test.JPG); } ** inside index.html file ** <LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css"> <BODY> blah </BODY> </LINK> Please help. thanks! Trying to delete my post but no option to delete so just removing content. Can someone please help me? I am trying to get my left side column to meet my footer image... just like on this website: newcastlegateshead.com See how they side bar goes all the way down and meets the footer? Mine has a one inch gap between the bottom of the column and the footer. Does anyone know what they did to make it meet perfectly?Or the proper css code & where to put it? I've been trying to get this solved for dayyyssss Thank you so much... On button on my website store on CSS but when user turn off "load image automatically" then images don't display. Please show me how to fix it. Thanks a lot. Please let me apologise if this this the dumbest question ever but I know almost nothing about CSS. I want to make the white section of my page, the text area, wider but I have no clue how to do it, (a friend did the page originally and she is no longer around). And if I do extend the white section can I just add more to the header image to make that fit the new text area? Thank you Hi Guys, I have a question about me not understanding how margins work... I am quite perplexed...I am trying to remove the white space between borders of table cells. I am using: Code: td { margin: 0; }
But there is still white space between the cells...how do I make no space between the cells? Code is located he http://www.taipeitripper.com/senshin_center/training_schedule.html Thank you, Evan Jerkunica |
|||||||