|
HTML - How To Link Image Map Areas To Outside Navigation Buttons
Here's a link to the page I'm currently working on.
http://www.vancouver4condos.com/test/ The big map picture is set up as an image map, with all the areas already specified. Each area gets highlighted when viewer hovers the cursor over it. Also, right above the map is a navigation menu, with all the buttons corresponding to each of the areas on the image map below. I was wondering if there is a way to connect each of the navigation buttons with their corresponding map image areas in such a way that when the user hovers the cursor over a button, its map area will automatically get highlighted. Ideally, the opposite would also be true - when hovering the cursor over one of the map areas, its corresponding navigation button would also highlight. Similar TutorialsHi I'm new to web design but have created a 1st shot. Unfortunately the 9 navigation buttons (spread horizontally) spill over onto a 2nd row. My guess is tat this is because the wording for some of the buttons is a bit wordy. I don't want to lose the words at this time. Any ideas of how I can arrive at a neat solution. Ideally I would prefer that all the buttons fitted into a single row. Is there any way of achieving this? (even if the text within certain cells is split over 2 rows within the cell) Thanks for any help you can give Chris you can see the sort of results I'm getting at www.universal-campus.net Below is the tswtabs.css style sheet referred to in the code for each web page and which contains the settings for the navigation buttons /* tswtabs.css 1.0.2 Please use the CSS Menu Button Wizard at http://www.thesitewizard.com/wizards...-buttons.shtml to generate your own customized menu buttons. */ #tswcsstabs ul { margin: 10 ; padding: 0 ; list-style: none ; display: inline ; } #tswcsstabs ul li { margin: 0 ; padding: 0 ; display: inline ; text-align: center ; list-style: none ; font-family: Arial, Helvetica, sans-serif ; } #tswcsstabs li a { color: #000 ; background-color: #36b4d6 ; border: 1px outset #00f ; padding: 8px ; text-decoration: none ; display: inline ; } #tswcsstabs li a:hover { color: #ff0 ; background-color: #0000c0 ; } Below is the code I'm using on each page to set out the navigation buttons <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="http://www.universal-campus.net/tswtabs.css"> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <title>about</title> </head> <body> <ul> </ul> <table style="text-align: left; width: 1360px; height: 282px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><a href="worldheader.jpg"><img style="border: 0px solid ; width: 1348px; height: 265px; float: left;" alt="" src="worldheader.jpg"></a></td> </tr> </tbody> </table> <table style="text-align: left; font-family: Arial; font-weight: bold; width: 100%;" border="1" cellpadding="2" cellspacing="5"> <tbody> <tr> <td> <div id="tswcsstabs"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Global Campus</a></li> <li><a href="portfolio.html">Our own Business Portfolio</a></li> <li><a href="business.html">Getting more from your Business</a></li> <li><a href="investment.html">Maximising your Investments</a></li> <li><a href="coach.html">Your Coach & Mentor</a></li> <li><a href="exit.html">Making the most from your exit</a></li> <li><a href="feedback.html">Contacting Us</a></li> <li><a href="associate.html">Working as one of our Associates</a></li> </ul> </div> </td> </tr> </tbody> Hello, I painted web design with Photoshop and used slice tool to slice it. Than exported to html file. No css file. And I got a problem. When in page are a lot of text wich goes down, my navigation buttons gets far away from each other. I attached screenshots. Looking to the website with Opera browser, everything is alright, but browsing via IE it looks bad. Editing with dreamweaver everything looks good like with opera, but editing with FrontPage, it looks bad like via IE. Maybe someone can help me? Thank you. Sorry for my bad english. LINK TO THE WEBSITE I have some buttons I made for a navigation that goes across the top (horizontaly) and I have quite a few. So they don't all fit in one row. What I want to do is make a second row of buttons benethe the first row. like for example, button button button button button button button button ect. I knew using breaks wouldn't work, so I don't know why I tried. I used a generator so I know nothing really about divs or tables or anything like that, but if someone could show me where to add like a break for this type of html that would be great!! HTML Code: <td width="3"></td>
<td><div class="wg-button">
<a title="Quotes" style ="POSITION: relative" href="../quotes/index.html" ><img alt="" src="../_frame/button.png"><span style="LEFT: 18px; WIDTH: 77px; CURSOR: hand; POSITION: absolute; TOP: 18px"
>Quotes</span></a></div></td>
<td width="3"></td>
<td><div class="wg-button">
<a title="Glitters" style="POSITION: relative" href="../glitters/index.html" ><img alt="" src="../_frame/button.png"><span style="LEFT: 16px; WIDTH: 77px; CURSOR: hand; POSITION: absolute; TOP: 11px"
>Glitters</span></a></div></td>
<td width="3"></td>
<td><div class="wg-button">
<a title="Icons" style="POSITION: relative" href="../icons/index.html" ><img alt="" src="../_frame/button.png"><span style="LEFT: 18px; WIDTH: 77px; CURSOR: hand; POSITION: absolute; TOP: 18px"
>Icons</span></a></div></td>
Hey guys, EDIT: I figured it out. There was a phantom image that I had between the two that no longer belongs. Nevermind! Thanks, ~C-Style~ Ok I've redesigned my friends website back to his old look since he didnt like mine http://acidtripmedia.com/lmi/ But I need a little help getting the navigation images & links properly. Right now the 2nd row of links is behind the image for the navigation Here is the original site to compa http://lmiinc.com/LMIinc_Marksmanship.html What can I do to fix the placement of the image? If I try using the IMG tags in the frame that contains my navigation bar, it moves the picture down and it looks very ugly. In the other hand, I need to create an image map for it but I can't seem to find a way to do that. Halp. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE>Navigation Bar</TITLE> <LINK REL="shortcut icon" HREF="favicon.ico" TYPE="image/x-icon"> <LINK REL="icon" HREF="favicon.ico" TYPE="image/x-icon"> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"> <META NAME="author" CONTENT="CENSOREDCENSOREDCENSORED"> <META NAME="version" CONTENT="0.7"> <META NAME="description" CONTENT="CENSOREDCENSOREDCENSORED."> <META NAME="keywords" CONTENT="CENSOREDCENSOREDCENSORED"> </HEAD> <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0"> <TABLE WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0" HEIGHT="145"> <TR ALIGN="left" VALIGN="top"> <TD HEIGHT="145" WIDTH="780" BACKGROUND="navbar.jpg" NORESIZE BORDER="0" ALT="Navigation Bar"></TD> <MAP NAME="navbar"> <AREA SHAPE="rect" COORDS="341,99,434,124" HREF="main.html" ALT="Home"> </MAP> </TR> </TABLE> </BODY> </HTML> Obviously incomplete, I was trying to get the map to work. I removed the USEMAP="#navbar" because using it with the IMG tags made it look like crap. navbar.jpg is similar to this. I have a JSP with HTML and Javascript in it. There're 2 image buttons and 1 Submit button, for some reason ALL buttons submit (when I click any of the image buttons, it works fine but submits too). I'm kinda new to HTML and JS so i need to know where did I go wrong Code: <form action="Req_Result" method="post" name="entry" onSubmit="return validate(this)"> <table border="0" cellpadding="10" cellspacing="10"> <tr> <td> <table> <tr> <td><INPUT TYPE="RADIO" NAME="searchBy" checked="checked" value="byname" onclick="sortby()"> By Name</td> </tr> <tr> <td><INPUT TYPE="RADIO" NAME="searchBy" value="byDate" onclick="sortby()"> By Date</td> </tr> <tr> <td><INPUT TYPE="RADIO" NAME="searchType" checked="checked" value="whole" onClick="chMd()"> By Department</td> </tr> <tr> <td><INPUT TYPE="RADIO" NAME="searchType" value="byid" onClick="chMd()"> By ID</td> <td><input name="ps" type="text" size="18" disabled="disabled"></td> </tr> <tr> <td>Start Date:</td> <td><input name="startdate" id="startdate" type="text" size="18" readonly> <input type="image" src="theme/panelCalendarIcon.gif" value="date1" onClick="SelectDate()" ></td> </tr> <tr> <td>End Date:</td> <td><input name="enddate" id="enddate" type="text" size="18" readonly> <input type="image" src="theme/panelCalendarIcon.gif" value="date2" onClick="SelectDate()" ></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Submit"></td> </tr> </table> </td> </tr> </table> </form> Sorry may sound like a noobish question but this is the first time I have made a site, but i have added images to my site as links but they move when the browser window is adjusted, so just wanted to know how to keep them fixed in one position. this is my site: www.d1ndesigns.com thanks I've been running an ad on my site using the Google Double Click program since March with no problems. Suddenly this week, despite not even logging into Doubleclick or making any changes to the code on any of my pages, one of my larger ads is jumping outside of the space allotted for it and into my text. To make it even stranger, it will only do this periodically. IOW, sometimes the ads are being served correctly, but sometimes they get messed up. You can see this happening on this page: http://www.raw-food-health.net/NaturalCures.html Continue to hit refresh as my ads cycle until my large green/yellow square ad to the top left of the center column for "The Raw Food Lifestyle Ebook," appears. Keep hitting refresh over and over again. It might take a dozen times or more. I've seen this happen in firefox and Safari. I've cleared my cache. You'll see that sometimes it appears within its normal area, but sometimes it "jumps" out and partially covers the text to the right of it. Since I haven't done anything to my site or my doubleclick settings , I don't know what to make of this. I've already sought help on the Doubleclick forum, but the consensus there seems tobe that it is not a DC issue, but an HTML issue. You can see lengthy discussion about it here. Let me know if there are any other questions. Any help you could give me would be greatly appreciated. Thanks, Andrew Hjallo wizkids I need some help on a forum I'm currently building a test of a new forum. I'm trying to get some paypal buttons onto the forum portal as seen on www.nicoan.dk I want to get rid of the grey background, the images are .png! So I think it might be the <form> tag that creates the background This is one of the images Also I want to them to be horizontal and not vertical This is the unprotected code for one of the buttons Code: <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="Q8A9Q349JJUKE"> <input type="hidden" name="lc" value="DK"> <input type="hidden" name="item_name" value="Helix"> <input type="hidden" name="amount" value="5.00"> <input type="hidden" name="currency_code" value="GBP"> <input type="hidden" name="currency_code" value="GBP"> <input type="hidden" name="bn" value="PP-DonationsBF:5gbp.png:NonHosted"> <input type="image" src="http://www.nicoan.dk/images/icons/5gbp.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/da_DK/i/scr/pixel.gif" width="1" height="1"> </form> This is the protected code Code: <form action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7----- "> <input type="image" src="http://www.nicoan.dk/images/icons/5gbp.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/da_DK/i/scr/pixel.gif" width="1" height="1"> </form> Any help will be much appreciated! ~ Aki Hello, I have an image which has a white area somewhere on the right side, but not exactly on right. I want to put addthis.com share buttons on this white area (please see attachment to see the image I'm talking about). When I use div align="right" I get them to be on far right which is not what I want. How can I achieve this using HTML? If not addthis.com code, is there any way of putting simple text or links on this white portion? I donot want to use css to do this as I'm on joomla and using css for this little work conflicts with the main css of the joomla template. Please help me. This thing has been driving me crazy for days!!! Thanks, Hi there, Im kinda stuck. I would like these following areas: <span class="text">xx</span> <span class="icon">xx</span> .. to ALL be positioned at the same place when being hovered.Problem now is that they keep appearing besides their "button": Have a look here to see what I mean. Have a look here for the source, hope im making sense, thanks. Hello, I have a graphic background with image buttons ("img" inside an "a href" link). By default, when you right click a button (or left click and move pointer out), the browser paints a selection rectangle, painted with dotted lines, that remains there. The same selection is visible when you click the image button, until the new page loads. You can see it even on the top round buttons of this forum. It looks really bad on my page because the image buttons are ment to be part of the background, and such a selection is out of style. Is there a way I can instruct the browser not to paint this selection? Some CSS style or some other property? Thanks! Alex This is really strange. Normally I would expect to see something like this happening on pure CSS sites, but this is a good old fashioned table-based layout. If you go to: url and try to click on any of the menus, you'll see the menu item below it moves up. Also if you click on the logo it jumps down to the menu area? Very bizarre and have never seen this behavior in the 10 years I've been coding. Any insight would be greatly appreciated :-) the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg'
Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg'
Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg'
Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? Say I have an image that is 400px tall, and 200 px wide. What do I have to do so that if the user clicks the top half of the image, it takes him to a certain link, and it takes him to a different link if he clicks the lower half? I think this is possiboe, and I do not want to use 2 images... Thanks! I appreciate all your help! im kind of new to design and some of my image links have a small blue box around them and i dont know what it is. Im using dreamweaver to build my site. it is www.devilthreads.com if you want to check it out But how do i get rid of that damn blue box around the image link hi, I've tried for ages to use different methods to try to get the required code, but nothing seems to work. i'm trying to make a link which is an image, when it is clicked i'd like it to open the link in a new window. I also want the image on the original page to change once it has been clicked on. The target url need to be hidden on the mouseover on original page. for use in example: original image = image1.gif lnik url= http://my chosen site.html after click inmage = image2.gif I will be needing this to be able to be repeated for different target urls, all on the same page next to eachother. any help is much appreciated! confused idiot I have not touched HTML for months, now work brings me back to it. Simple question. I am using images as links. I don't want any symbol active or visited link around the image. How do I simply get rid of this. Thanks! |
|||||||