HTML - Resizing An Imagemap
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? 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 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. 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? 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 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 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 Hello, I'm kinda new to HTML, but have used it for a long time, just haven't used it to do stuff from scratch before. I was wondering how I would set up a page to resize and not have scrollbars. I'll attach an example. I want there to be a footer that will ALWAYS be at the bottom of the window, not just the content. I wan to have a middle section that will stretch between my header and footer, and I want it to have somewhat of an internal scrollbar if the content inside is bigger than the window: Code: The header footer, and middle section should fill the browser window ----------------------------------------------- header ----------------------------------------------- xxxxxxxxxxxxxxxxxx[^] -------------- xxxxxxxxxxxxxxxxxx| | | content: height=100%| | | | xxxxxxxxxxxxxxxxxx| | | | xxxxxxxxxxxxxxxxxx| | | more | xxxxxxxxxxxxxxxxxx| | | here | xxxxxxxxxxxxxxxxxx[v] _________| ------------------------------------------------ footer(bottom aligned to browser window ------------------------------------------------ Ok the ASCII isn't working too well... EDIT: Ok I got the footer working, but what about making the middle part span the width from the bottom of the header to the top of the footer without stretching out the page? I have a link that needs to open in a new, smaller window. I have the target="_blank" attribute set but the window opens at full size. I know that some people advise against opening links in a new window, but I need this one to do so. Any help greatly appreciated. Is there a way to disable the resizing of a window in firefox? I'm using this code: window.open('google.com','newwin','width=200,height=200,resizable=no') In Internet Explorer it's working fine but in Firefox it's not Thanks I'm using the example frame as laid out he http://www.quackit.com/html/template...example_6.html and I'm struggling to figure out how to resize the 'Related' frame. I want to make it stretch to the top and bottom of the page (therefore making the width of the top and bottom rows smaller). The frame set code is: <frameset rows="100,*,80" frameborder="0" border="0" framespacing="0"> <frame name="topNav" src="top_nav.html"> <frameset cols="200,*,200" frameborder="0" border="0" framespacing="0"> <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> <frame name="related" src="related.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> </frameset> <frame name="footer" src="footer.html"> </frameset> </html> and the codes for the frames can be found he http://www.quackit.com/html/examples...ple_6_code.cfm To give you an idea of what I'm trying to achieve, I want to make the right hand lion extend up and down so that when the page resizes, the colours for the top and bottom borders will always match seamlessly. At the minute I have only managed to make the horizontal JPG smaller, not the actual frame. Hi, I've created a page in a table that's 1080 pixels width with 3 columns, two side bars that are 165 and 200 pixels with banners and ads and a central panel 600 pixels for content and my screen settings are 1024x768 when I change my screen resolution to a smaller setting the table stays the same size but the content in the three columns shrinks so the page does not fit properly in the table and everything is out of place. What is the best way to format a page to stay the same no matter what the screen resolution or screen size is? Thank you in advance for your help. Sorry it's an intranet site but here is the html. Thanks for the tip Zegron <html> <head> <title>OCC Net</title> </head> <body> <table WIDTH="100%" valign="top" border="2" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> <tr> <td rowspan="200" width="163" valign="top"> <!--#include file="includes/links.asp"--> </td> <td align="left" valign="top" width="620"> <!--#include file="includes/CenterPanel.asp"--> </td> <td width="220" valign="top" rowspan="200"> <!--#include file="includes/RightMenuHome.asp"--> </td> </tr> </table> </body> </html> I have a site which I made relative and positioned to my 15" laptop screen... instantly I found a problem when I saw it on a smaller screen... and then on a larger screen... I need to somehow figure out a way for the images, text and div boxes to resize relative to the monitor being used. I've figured it out for the div tags, using a percentage, rather than pixel... but imaging size/possitioning and text size are a little more trickier to figure out? Code: .logo{ position:absolute; width:100%; top: 11px; } The images have been given a pixel width and height because the actual image is slightly bigger. What can I do? I work it out by dividing my screen resolution: (1280 x 800) by the actual pixels on my screen to get a percentage... is this the right way? (for example the div class .logo is 11 px from the top... would this then be 11 / 800 (resolution height) ... which gives me 0.013% is there another way perhaps? I have a site which uses frames. I recently added a new page and in the page there is a link to open up a jukebox ,I made, in the upper frame. The frame the link is in is below the one where it is suppose to open. Everything works fine but the size for the top frame is smaller than the jukebox I want in there. So when you open up the link it opens the jukebox up but only a portion is shown. I have it so you are allowed to scroll but I'd prefer that the frame would be automatically rezized to fit the jukebox. Is that possible? If so can you please let me know how? Any Help is Appreciated Hi there, I have some text inside a layer and I am pretty happy with it. Trouble is that I would like to disable the resizing from the browser so that the user cannot choose a text size that would mess up my text. I am refering to "View > Text Size" in IE. Can u help? Thks OK, what I want to do is set an image in a cell which will change size as the browser window is resized. So, say I have a three-cell table: ------------------------------------------------ | ---------------------------------------------- | | ---------------------------------------------- | |----------------------------------------------| | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | ------------------------------------------------ It is set to width=100% and height=100% (using css). The top cell has a fixed height of 50, the bottom-right cell has a fixed width of 600 (all this is just hypothetical, the actual page will be much more complicated). So, the bottom-left cell will be changing in height and width as the browser window is resized. The problem is that when I put an image in the cell and say height="100%" and width="100%" the thing doesn't work. If I give the cell and image a set width or height, the other dimension (height or width) stretches just fine. I know that the problem is that the image wants to maintain a certain aspect ratio (say, 1:3). What I want to know, in short, is if there is any way to override this and make the image render to the size of the cell whether or not that maintains the proper aspect ratio. Hi, is there a way that a window opens with a specific size? (not the window that opens with a link on a page) for example, when i go into www.gucci.com-the window will automatically resize to their specific size. I want my own website to open in a specific size but im not sure how.. hi.i need some help : i got a web page that looks something like this how can i make the background image to autoresize according to the screen resolution of the monitor from where the page is seen?same with the banner and the rest of the images.i basically want my website to look exactly like in the picture no matter what is the resolution of the screen and without a scroll bar. and another thing: how can i make to load only the text on the orangebox when i click a side link(e.g:assus) without refreshing the hole page.and how can i put a scroll only on the orange box so i can put a longer text and not to exit from that rectangular space? thank you Hi folks, I am frustrated and hope that someone can throw their three cents in the mix and offer a solution for a web design problem I'm facing. I am sure it is simple to someone who understands the complexities of web design. I am developing a website ..however when I go to view the site on a smaller monitor, my site looks squished and the elements are all on top of one another. I have a 20 inch monitor and I assume that I should be designing for a 17 inch, eh? What can I do so as my web page resizes correctly for any size monitor? http://www.talktomydog.com/coach.htm Do I need to change the resolution of the monitor to 800x600 when I design the site,,or is it something else I need to do? Thanks so much.. T Situation: My site allows people to upload their profile picture - nothing new. However, when someone wants to view the profile of my members I want their profile picture to be displayed proudly. The problem is that members will upload different sizes of images, mostly between 200 x 400. But there are times a member will upload a very large image, or a very small image. When I do image resizing I can't seem to get the small images to look correct because I set the width at 200px, which causes the image to auto resize proportionately to it's height as well, So it look ok. But small images that are already under 200px are stretched. Is there a way to make the html resize an image no greater than 200 px, but not affect images already under the 200px limit? thanks! |