Jump to content

Search the Community

Showing results for tags 'area'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 4 results

  1. in the AREA TAG example (Try it Editor) I would like to suggest to add a title attribute to the alt attribute so that the names of the areas appear in the result, which is NOT the case actually.
  2. in the AREA TAG example (Try it Editor) I would like to suggest to add a title attribute to the alt attribute so that the names of the areas appear in the result, which is NOT the case actually.
  3. I've been messing around with the map and area elements (for the first time) to build a navigation bar with images, and I've run into a couple problems. The first problem is the images used in the navigation bar aren't aligning in firefox how I think I set them to align. Here is capture, from firefox, showing what I mean: However, they align exactly how I want them to align in all the other major browsers. For instance, here is capture from chrome: The code in question is the cell with the id of navigation. Additionally I would like to be able to create a hover state, and an active state for these images used in the navigation bar. This is the second problem I've been having. I don't know if it's even possible to use CSS on images to create a hover state for a link. If it is, I'm surely doing something wrong, based on the things I've tried. I'd like to be able to change the image when hovered over, and at the very least I'd like to be able to underline the image on hover. I checked around to see what I could find, but I didn't find anything that I perceived as an answer to my problems. Any help would be greatly appreciated. This is my HTML: <!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Sarasota-Tampa Express Homepage</title><link href="all.css" rel="stylesheet" type="text/css" /></head><body id="theHeader" ><table id="headerTable" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="logoBox"> <img src="images/Sarasota-Tampa-Express-Logo.png" width="205" height="75" alt="Logo" /></td> <td> <table id="rightsideHeader" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p id="tagLine">We make things convenient for you! <span id="phoneNumber">Call Today! (941)366-6600</span></p> </td> </tr> <tr> <td align="left" valign="top" id="navigation"><img src="images/home.png" usemap ="#home" id="home"/><map name="home"><area shape="poly" coords="-3,0,74,0,74,8,79,16,74,24,74,33,-3,33" href="index.html" alt="Home"/></map><img src="images/about-us.png" id="aboutUs" usemap ="#aboutUs"/><map name="aboutUs"><area shape="poly" coords="0,0,105,0,105,8,110,16,105,24,105,33,0,33,0,24,5,16,0,8" href="index.html" alt="About us"/></map><img src="images/route-and-schedule.png" id="routeAndSchedule" usemap="#routeAndSchedule"/><map name="routeAndSchedule"><area shape="poly" coords="0,0,173,0,173,8,178,16,173,24,173,33,0,33,0,24,5,16,0,8" href="index.html" alt="Route And Schedule"/></map><img src="images/flight-information.png" id="flightInfo" usemap="#flightInfo"/><map name="flightInfo"><area shape="poly" coords="0,0,179,0,179,8,184,16,179,24,179,33,0,33,0,24,5,16,0,8" href="index.html" alt=" Flight Information"/></map><img src="images/fare.png" id="fare" usemap="fare"/><map name="fare"><area shape="poly" coords="0,0,70,0,70,33,0,33,0,24,5,16,0,8" href="index.html" alt="Fare"/></map></td> </tr> </table> </td> </tr></table><table id="mainTable" align="center"> <tr> <td> </td> </tr> </table> </body></html> This is my CSS: @charset "utf-8";.body {font-family: Verdana, Geneva, sans-serif;}.table {margin: 0px;padding: 0px;}.td {margin: 0px;padding: 0px;}/*==== header ====*/#theHeader {background-repeat: repeat-x;background-image: url(images/header-gradient.png);margin: 0px;}#headerTable {height: 150px;width: 1024px;margin-left: auto;margin-right: auto;/*==== leftside header ====*/}#logoBox {width: 268px;padding-left: 50px;}/*==== rightside header ====*/#rightsideHeader {height: 150px;}#tagLine {font-family: Verdana, Geneva, sans-serif;font-size: 16px;font-style: italic;text-align: left;color: #FFF;padding-top: 12px;}#phoneNumber {padding-left: 80px;} #navigation {height: 67px;width: 700px;padding-left: 0px;}img {border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;text-decoration: none;}#navbar {padding: 0px;height: 34px;width: 605px;}#home { } /*==== main content ====*/#mainTable {background-image: url(images/background-gradients.png);height: 618px;width: 1024px;}#aboutUs {position: relative;right: 5px;}#routeAndSchedule {position: relative;right: 10px;}#flightInfo {position: relative;right: 15px;}#fare {position: relative;right: 20px;}
  4. How can I make a button image overlap without overlapping the selectable areas? My idea was to use the map and area tags to change the selectable area of each image but I don't know how to overlap the images.Honestly, I don't know if this is the best way to handle my problem and I would be more than happy to hear suggestions.
  • Create New...