HTML - Imagemap Question
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 Similar TutorialsI 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>? 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? 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. 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, 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. 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 Hi, I was wondering if it is possible to create an image that floats where ever you put it on the page. For example, it would float above this text, blocking it out. Basically I want it to ignore anything around of underneath it. I would also like it not to use scripts, if possible. Oh and one more thing, is it possible to do this between the body tags only? Thanks! What exactly is XHTML. how much different from HTML is it? and, do I have to re-learn a whole bunch of stuff to write valid code with it? _________________ Golf Communities visa credit card review Hi there, great website! been browsing the forums and searching and havent found what i am looking for, so here goes a post. I have my own website, and I also have a webmail account with my hosting company (ixwebhosting) what i want to do is make 2 little boxes on my website, where you put username and password, and have that then take you to the ixwebhosting webmail login and go in directly to my webmail, can that be done? any ideas or links much appreciated! thanks 4 ur time! I am using a div relative to place text on top of an image. The problem that I am having is in Firefox when a dropdown list is overtop of this div tag, the div tag shows up on top of the dropdown. I do not want this to happen. It does not happen in IE and it allows the dropdown to show up on top. How do I fix this My code looks like this: <div style="left: 15px; position: relative; top: 20px;" border="0"><font size="2" color="#ff8c00"><strong>Example Text</strong></font></div> Thanks. Jeff M Hello, Is there a method to use a text file to update information on a couple pages at once? I have a "news" section on each of my pages, but whenever i need to update the news i have to change it on each page, which gets very long. I think i remember doing something awhile ago where i would have code in the news section that would read the text file; so i could simply change the news in the text file instead of every page. THanks for the help, JC I have a real rookie question. I am new to CSS and I was wondering if I need to upload my CSS files to me web server, and if so do they need to go into a special directory on that server? Thanks I think PHP is a great thing...just frustrating at times - eh, we all get frustrated sometimes. I never get to vent to anyone about my lack of understanding web design. I did indeed try this navigational menu on a website...I think it's a really neat idea, actually - boy, can this ever save some time. However I've ran into a small little problem - I'm sure an even medocre-level designer will point out some obvious problem I'm doing that is just going over my head. The following URL: http://www.conversationalhypnosis.net/navigation.php I have setup a test to see if the navigational menu icons to the left would work, and voila! They did! But there's this little bugger that looks like this: that's sitting right on top of my menu...and it's putting a little space in. See it there? Again, the URL is http://www.conversationalhypnosis.net/navigation.php The menu 'block' should be flush up against the header block. You'll see what I mean - it's much easier understoot when simply looked at vs. explaining it. I put the following code in to "navigation.php" where I wanted the menu to appear: <?php include("navigation.html");?> Right? I also made sure "navigation.html" was uploaded (and obviously it is because you can see it when you go to the "navigation.php" page.). Any helpful comments to this would also be greatly appreciated! P.S. Is this forum the best one to post a question about tables/columns? I'm using a web template that I "think" uses tables (The same site above)...right? There's a column along the right-side of the page that goes all the way down (as needed) the page...I'd like to put an RSS feed there with updated content - but the only problem is sometimes, depending on the RSS feed headline/description, the column will expand toward the center of the page. This in turn screws up the look of the actual "content" of the page (which is to be the text in the "middle" if you will). Any ideas on this? If I should direct this "tables" question elsewhere please let me know and I'll gladly comply! I'm currently using Microsoft Expression web designer...I'm still in the process of finding "the best one". I made sure the "No Wrap" was NOT checked in that right-column, BTW. I was looking through the code of this one website and i saw this: <script language="javascript"> <!-- insertPoll2('76375'); --> </script> I'm a bit confused by how this works, i dont know anything about javascript but this function here is used to create a poll and i want to do that on my website, but how does this work? Because the insertpoll2() function is Inside comments but also inside javascript braces. What's going on here? Thanks! Hi, is it possible to create a DTD for a xml-file, which can have a structure like any other xml but if in a node a attribut x appears in combination with an attribut y there are some rules which attributs have to appear in that node too. Thanks... p-flash So I'm working on my web page for my martial arts studio and I'm trying to figure out how I can do something. the page i have so far is www.boulderkempo.com/index2.html so what I want to happen is a black background on the main frame, and have a white box below the image for "home" with text. I also want all of these to end at a right side of the flash top part. I'll mess with the image size, but I need to know how to make a text box with a diffrent color background then the main background. I 've seen websites where they have text in a framed box, or it has a different color background. my blog is set up that way for example... http://wrxminion.wordpress.com/ (not trying to self promot.. my blog sucks anyway, i never update it) the other thing I'm trying to do is get the text to wrap to the next line at a certain point on the web page. I use dreamweaver and when i put margins it wraps the text at different window sizes in the browser. I really suck at webdesign, i'm only doing my own becouse i don't want to have to pay someone. sorry for such noob questions my main page is www.frankdeck.com Thanks alot for your guys help! Hello! I am new to this forum...sorry if I'm posting in the wrong place. I'm contructing my own jewelry website. I put in my ALT tags, and when I view the pages in my browser (I'm using Dreamweaver), the ALT tags don't show up. I don't know what I'm doing wrong. Here's a sample: <img src="images/citrine.jpg" alt="citrine necklace"> Am I doing something wrong? I would really appreciate knowing. I'm just about done with my website...this is the last thing I'm working on. KathyK27 I am planning on making my own website and I stumbled across one which I like the design of. I am particularly interested in the buttons of this site (along the left hand side) but cannot figure out how to replicate them. http://treacle.hewwo.com/jazz/oj/index.html I am using dreamweaver and trying to use the html to make my own similar round edged buttons but failing miserably! Any help would be appreciated. I am designing a pop that only shows up for first time users to the website. This is the code for the pop up. Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Script courtesy of http://www.web-source.net - Your Guide to Professional Web Site Design and Development function GetCookie(name) { var arg=name+"="; var alen=arg.length; var clen=document.cookie.length; var i=0; while (i<clen) { var j=i+alen; if (document.cookie.substring(i,j)==arg) return "here"; i=document.cookie.indexOf(" ",i)+1; if (i==0) break; } return null; } var visit=GetCookie("COOKIE1"); if (visit==null){ var expire=new Date(); window.name = "thiswin"; newwin=open("http://www.flashgamingempire.com/popup.html", "dispwin", "width=450,height=155,scrollbars=yes,menubar=no"); expire=new Date(expire.getTime()+7776000000); document.cookie="COOKIE1=here; expires="+expire; } // --> </SCRIPT> Here is the code for the popup.html: Code: <div align="center"><p style="font-size:x-large">You Must Be Registered to Be Able to Win Prizes on This Site</p><div> <div align="center"><p style="font-size:medium"><a href="http://www.flashgamingempire.com/index.php?loadpage=./includes/register.php" onclick="return targetopener(this,true)">CLICK HERE TO REGISTER</a></p><div> What I want to be able to do is when the user clicks register, I want that window to close and the main window to go to the Register page. How do I do that? Any help is greatly appreciated. (My website is: http://www.flashgamingempire.com) Thanks. |