|
CSS - Image Maps
Howdy,
I am working on a particular project that requires a single image to have several clickable links. I assume an image map is best for this however i am just wondering how compaitible one is and also, how do i do it? Thanks Similar TutorialsHello. I'm a first time poster and also still wet behind the ears as far as CSS goes. I would like to know if there is a way to insert image map coordinates into a style sheet so I do not have to repeat those image map coordinates on each html page. Here's my sample that I'm working with: URL So I have one image (which I know I have to put on the html page, because CSS only allows background images), and then all these hotspots on the image that form the map + coordinates. If there is a way to put all those coordinates over into an external style sheet, I'll be ... ecstatic. If there's not a way, then I'll abandon this idea and move on! Much thanks in advance, san antone rose How can I best place Image maps with CSS? It seems the text placement command works, but I don't know whether that's the best way. Here's a test page I threw together which uses this command to place the image map: http://www.gamexplain.com/test2.htm So is there a better way? How should I format the command? Thanks! Hi, I have tried my hand at creating a box to set a fake image map over a background image, without luck. (But, I'm a total dork using css. Absolute beginner.) I have been trying the instructions he http://www.position-relative.com/tutorials/tute1_css_bg_image.php However, my background image is set into the body css spec, though I have only tag styles + the body's background image set using css. The rest of my page is tables, so I am wondering if I need to set the background image [for my whole page] using the .box1 spec shown on the tutorial at the link above? And if not, I don't know where / how to use the "#box-link {" noted in this tutorial. Or, if there is a different way to set the links on my css body spec'd background image... ? My background image css spec: Code: body {background-image:url("images/Header.jpg");
background-repeat:no-repeat;
background-position:top;
}
Hello, I have recently intergrated Google Maps (via its API) onto my site, but have a little problem, the balloon pop-ups can not seem to contain the text in its entirety: Example 1 I am sure this relates to something which is incorrect with my CSS (possibly padding) but at present I can't get anything to work. The problem persists in Firefox, Opera and IE (although IE crashes when this page has loaded!). Any ideas guys? Thanks, Saj PS - Click the red balloon to see what I'm on about! http://nj-asap.com/directions.php I am trying to change the font on the directions part of this page, but nothing seems to effect it. Here is the table: Code:
<table border="1px" align="center" cellpadding="0" cellspacing="0" bordercolor="#6A9EB4" bgcolor="#BFD6DF" class="content">
<tr><td align="center"><strong>Directions</strong></td>
<td align="center"><strong>Map</strong></td></tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><div class="maps" id="directions" style="width: 280px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;"></div></td>
<td valign="top" bgcolor="#FFFFFF"><div class="maps" id="map_canvas" style="width: 340px; height: 400px; margin:5px; border: 1px solid #000000;"></div></td>
</tr>
</table>
I have tried setting the class on the table tag, the tr tag, and the td tag. Currently it is on the div tag, I have even tried putting the font-size on the style of the div tag, but nothing seems to change it. I also tried setting the font size in the body tag. I'm trying to create a page layout for a Bing Maps application using css and html. I'd like to create a layout similar to http://maps.google.com I have a bar at the very top of the page 25px high, a header 90px high, a left column 270px wide and the rest of the page, or the right column is the Bing Map. Currently, the map fills the width to the edge of the page as I'd like it to, however, I can't get the height to do the same. I have to set a px height for the div containing the map, which is fine, but when viewed in a different browser or with different screen resolution, the scroll bar appears and you have to scroll down to see the full map. Does anyone have any idea how google's managed to have the map height equal to the window height minus the header, etc? I hope this makes sense. Many thanks Hi guys I have been reading about sprites and CSS. The fact you can load an image that contains all the state the image can have on hovers is excactly what i am looking for. also the fact that you can do it without javascript makes it even better. But i have a problem that i need to create a menu, where the text turn blue on hover. Here it is (danish text): As far as I know, I need to map all areas the with polygon to make the links work. And then apply sprite functionality. But I haven't seen any 'sprites and maps' tutorials, so I am beginning to think that it cant be done with CSS. But before I give up, I would like to ask you if it can be done, and maybe give me some tutorial link or suggestions. I have tried to do some tutorials, so I think I have the basic idea. Thanks in advance 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! 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(!) 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. Figured this was simple, but I can't seem to figure it out. Using CSS, I want to put an image on the left with text to the right aligned to the bottom. I could easily do this with a table, but I'd like to find a CSS way. With CSS like: .imginfo {float:none;clear:both;margin-top:1em;} .imginfo img {float:left;margin-right:1em;} and code like: Code: <div class="imginfo"> <img src="..." /> Line of Text<br /> Line of Text<br /> Line of Text<br /> </div> I get the image on the left and the text on the right, but, the text starts at the top of the image. I want it to end up aligned to the bottom of the image. Attempting to use vertical-align: bottom doesn't do anything with the text. The effect I am looking for is like below. If you assume the XXX are the image... Code: XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text XXXXXXXXXXXX Line of Text Here's the deal. I want to have one generic button image that I can use for all buttons. Therefore, I don't want to have words on the image but instead want to write them in afterward. Normally, you could just do something like Code: <input type="image" src="..." and things are fine. However, like I said, I don't want to do that because this forces me to create an image with the words already on them. I want a black button that I can write the words on, but want it to still behave like a submit button. Which means, once I type in my username and password, I just want to be able to hit enter (and not be forced to click on the button) and submit the form. Am I asking for too much? Hi, Instead of organising an image sprite as follows: image image image image image image i'm wondering if there are any negative effects to organising the images in a linear fashion as follows image image image image image image I know that Flash will only render images that are a certain width or height but is there any such limitations when using css sprites? Thanks Hi I am redesigning my blog and took it down completely. I want to place the day's text post on the day's photo post on top of the latter, while graying out the photo. Is that possible without using flash? I cant seem to get this to position correctly in firefox. Looks great in IE though... Perhaps I should just use divs with margins rather than ul's I am using a single gif file as an image sprite and want to link the file name in another style sheet so i can reuse this sheet without having to have many copys of the style sheet with a different file names example: Currently like this Code: #store{left:-200px;width:158px;}
#store{background:url('mred.gif') -150px -161px;}
#store a:hover{background: url('mred.gif') -150px 0;}
#fourms{left:0px;width:158px;}
#fourms{background:url('mred.gif') -304px -161px;}
#fourms a:hover{background: url('mred.gif') -304px 0;}
want like this
#home{left:-200px ;width:150px;}
#home{background:inherit;background-position: 0 -161px;}
#home a:hover{background-position: 0 0;}
with the background:url('mred.gif') specified in another style sheet once insted of repeating over the entire sheet. effectively so i can just change the other external style sheet to change the gif file and keep this one the same. HOW? possible? I'm trying to create a little background image for each image on this page. A kind of crappy looking polaroid type background image. It works fine in Firefox, but not in IE. Any ideas? http://www.rhizaowns.com/holly/index.php |
|||||||