|
HTML - How To Use Imagemap On Fixed Background?
I have a site with text scrolling over a fixed background - mbccc.net - and I want the background to be an imagemap so's I can link from different parts of it.
But I can't make it work. I can make an imagemap work alright. But not on a fixed background image. Is it possible or does making the image a 'background' image and 'fixing' it in position mean that it can't be referenced as an imagemap any more? regards, ab Similar TutorialsHello. I need some assistance in figure out how to make a fixed/linkable/image. I used this code here
HTML Code: <body style="background-attachment: fixed; background-repeat: no-repeat;" background="XXX.jpg"> which worked great in keeping its place. Then I added HTML Code: <a href="http://www.davesite.com/"> before and after but no luck. Im trying to get that link to work for the background too, but its not working out at all. "Sadly no HTML skills whatsoever" hi guys im after a simple code so that the background on my forum is fixed and only the foreground moves up and down, someone must know iv looked all over the place and cant find how anywhere,someone help please Cheers Jacob I used this code here but it doesnt seem to work for GoogleChrome browser well, as it did for the others. Is there a code that will work for all the browsers? HTML Code: <html>
<head>
<script language="javascript">
function randomBackground()
{
var myImages = Array();
myImages[0] = 'xxx.jpg';
myImages[1] = 'xxx.jpg';
myRandomNumber = Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'URL('+myImages[myRandomNumber]+')';
}
</script>
<style type="text/css">
body
{
background-attachment: fixed;
background-repeat: no-repeat;
}
</style>
</head>
<body onload="randomBackground();"></body>
This one has been giving me a headache for days now. I wish to place an image in the background so my text can scroll while the image remains still: <div id ="scroll" style="padding:0px; font-size:0px; overflow:hidden; background-image:url(files/images/b2l.jpg); float:left; height: 480px; width: 360px; color: #FFFFFF; font-family:Arial, Helvetica, sans- serif;"> http://www.muskmagazine.com/wintertrendstest.html This works fine on Safari and Firefox but when viewed on IE6 the image moves along with the text. I have been playing with position:fixed; with no luck. Soon as I get it working on IE6 the image is miss- aligned in Safari/ Firefox. Please someone have mercy! Justin can someone outline the steps to making a page with a fixed background and a scrolling foreground such as can be found here? http://www.paul-wallas.co.uk/ i've looked at the code and what information i've found on the web but i don't see how it is done. tia, Hi All This is my first post so i hope I provide all the info you need, to be able to help. I am working inside Macromedia UltraDev as this is waht I was taught with over a decade ago. Problem started when I set a fixed background image to the page . . . dropdown menu still displays, but everything else (text & pics) in table seem to be hiddden behind the background image. here is the code HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>
<link rel="stylesheet" type="text/css" href="dropdown/dropdown.css" />
<script src="dropdown/btp.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Barcaldine Tourist Park</title>
</head>
<body>
<div align="center"> <center>
<table width="1000" border="0" cellpadding="0" height="100%">
<tr>
<td height="54" colspan="2">
<div align="center">
<h1><font face="Georgia, Times New Roman, Times, serif" size="+7">Barcaldine
Tourist Park</font></h1>
</div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td height="146" colspan="2"> <span class="preload1"></span> <span class="preload2"></span>
<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" class="top_link"><span>Park Features</span></a></li>
<li class="top"><a href="#nogo22" class="top_link"><span>Accommodation</span></a></li>
<li class="top"><a href="#nogo27" class="top_link"><span>Our Tarrifs</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Special Offers
</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Local Photos</span></a></li>
<li class="top"><a href="#nogo57" class="top_link"><span>Contact Us</span></a></li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Local
Attractions</span></a>
<ul class="sub">
<li><a href="#nogo54">Australian Workers Heritage Centre</a></li>
<li><a href="#nogo55">Tree of Knowledge</a></li>
<li><a href="#nogo56">Artesian Country Tours</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td rowspan="2" width="99"> </td>
</tr>
<tr>
<td rowspan="5" width="895" bgcolor="#FFFFFF">
<div align="center"></div>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99"> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="99" height="23"> </td>
</tr>
</table>
</center></div>
<div id="page-background"><img src="images/bg.jpg" width="100%" height="100%" alt="Smile"></div>
<div id="content">
</div>
</body>
</html>
I didn't know where to post this one so I am posting this in both CSS and HTML. I have one last problem to tackel (I hope) I want my footer to be my Navbar. Here is my current code (attached is a GFX of what it looks like): <!doctype html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>The works of D.M. Rosemark</title> <style type="text/css" media="screen"> <!-- body { background: url("bkg.gif"); background-repeat:no-repeat; background-attachment:fixed; margin: 0px } div#wrap { margin: 0 auto; width: 800px; } div#header { height: 100px; background: url("bkga.gif"); background-repeat:no-repeat; background-attachment:fixed; margin: 0px } div#footer { height: 100px; background: url("bkgb.jpg"); background-repeat:no-repeat; background-attachment:fixed; margin: 0px } div#frame { margin: 0 auto; width: 600px; } iframe#one { border-style:ridge; border-width:10px; border-color:#999999; width: 600px; height: 375px; padding:1px; } //--> </style> </head> <body> <div id="header"></div> <div id="frame"><iframe id="one" frameborder="0" src="01.html" scrolling="yes"> </iframe></div> <div id="footer"></div> </body> </html> So since I cannot use HTML in my CSS, which is where my 'footer' (bkgb.jpg) resides how preytel do I make an image map in CSS? or is it possible to create the image map in the HTML portion relating to the CSS <DIV>? http://www.wishwishwish.net Okay, so i created this website by modifying the default wordpress theme, and using my own image as a background, which is defined in the css. I originally wanted to use an imagemap, so I used this tutorial to help me create one, with the css in the style.css, and html in header.php this works perfectly in firefox, but not at all in IE, the links do not appear. this might be happening in other browswers as well, what's wrong? is it the method i've used for creating the floating image map? Hello, I have created a large image with an image map (see http://www.brammaas.nl/australia/). However, the image map is not working correctly (just hover the image and you will notice that not every dot or image in the map corresponds with the link it should correspond with). Do you have any idea why this code is not working? Best regards, Hi, quick question about imagemaps I have a map of the UK that I'm using with an imagemap, different clickable regions. I've got the areas defined properly. Is it possible to have some kind of a:hover css rule on the different areas, so for example the region will change colour but leave the rest of the picture the original colour; maybe using background images?? I was thinking of putting the map picture in the background of a div, then using a transparent gif over the top and applying the imagemap to that so i could still change the background-position, but then i got confused. Thanks for any advice I have an image of a city map that I would like to use on my website as an image map. There are several areas that I'd like to turn into poly links. Inconveniently, these areas are not nice and square, which means that finding all the coordinates manually will be a major pain. Is there a way for me to select an area on that image that I want to map out, feed it to some program, and get it to spit out all the coordinates for me of my selection? I've tried a plugin that comes with GIMP, and a program called Meracl ImageMap Generator, but they both require to manually set all the poly nodes. It sure would be nice if there was a program or a website service that could take an image with a preselected area and find all the nodes automatically. So frankly, I'm confused. I have an image map set up for an image on a webpage I was asked to design, and the map links WORK in google chrome, and in Safari. However, they do NOT work in Firefox nor in IE 8. I have verified the html code, so I don't know what it would be. Any ideas? I can show the html if you'd like. I know it sounds silly to even be asking questions about imagemaps, but i can't figure out any other way of getting what I want. Here's my issue: At the side of my page, in a frame, I want to have an image map that serves as a navigational pane for the whole site (links like 'home', 'about us', 'links'. . . ). From previous experience with websites getting all mucked up when viewed on different sized monitors or with different resolutions, I've made every image on the site resize-able as the the window dimensions are changed, hopefully ensuring nothing will ever get lost off the sides or mutated in wrap-around's. Everything looked great, and I was ready to apply the parameters to the image map, but of course, half-way through programming the imagemap, I realized the inevitable problem: As the image size changes, the co-ordinates of my imagemap will no longer apply to the graphic. I don't want to resort just putting ugly text over the scalable background image (which is where I'm at now) when everything else on the site looks so rich (or so I think). I'm certain that image maps aren't the answer, but is there anything else? My basic problem is that I want an series of links at the side of my page, attatched to buttons designed in photoshop, and totally resizeable as the all the other images on the site. Any help? Hi, I'm a complete newb and html-challenged, so please forgive my stupid questions. This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right? So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks! ~Serena P.S. is it possible to do mouseovers for certain coordinates on an image map? I have a control on a pop up that i cant seem to get rid of the scroll bars....How do you create a pop up window with no scroll bars I want it to use the scroll bars on the control instead....any help with this issue?? Hi everyone!! I have a div box that has a fixed position so it is always there when you scroll down a page.... but as I have a long footer, the fixed div box goes over the footer when I scroll to the bottom of the page what is the best way to scroll a div box within another div box, so the div box is visible and scrolls with the page up to where the footer div starts? hope that makes sense? many thanks for you're help. Hi i have a table with a picture within its only cell . How can i lock the size of the table so that it wil not get any larger should a larger image be put in it? I have tried setting the width and height to a fixed value but that does not seem to do keep it fixed. Ideally i would like the image to resize itself to match the maximum values of the table but this i suppose will probably be a good bit harder? Hi all, i have table with 3 columns, this is the code: <body> <center><table frame="vsides" cellspacing="0" border="2" width="1000" cellpadding="10" > <tr> <td bgcolor="white" width="200" valign="top"> <br><br>This is some text. </td> <td bgcolor="white" width="600" valign="top"><br> This is some text. </td> <td bgcolor="white" width="200" valign="top"> <br> This is some text. </td> </tr> </table></center> </body> but when i enter some more txt table expand, is it possible to create table that columns can expand(height) but rows not(width)? thx |
|||||||