Jump to content

Search the Community

Showing results for tags 'hover'.

  • 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








  1. 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;}
  2. how do i size a link so when the mouse rolls over it creates a background column for the length of the page? Tried: <li><a href>1399 </a></li> a:hover{background-color:yellow;background-height: auto;} also tried w/a px value but not use. Saw the effect on a website & wanted to try & recreate it. ( Nope can't find the link I used or i'd ckeck the page source )thank you
  3. Hey guys! Btw, great new look Okay, I have a problem that I fear cannot be resolved.I would simply like confirmation of this. My site makes use of jQuery and the LavaLamp effet for the menu.You can check it out here. My problem is this: the portfolio section is basically a jQuery slideshow, with fading transitions and such.We're still good. The problem comes when I add an animation the the background image.The slideshow becomes choppy whenever the user moves his mouse. Am I coding in a non-efficent way?Or is this just a normal jQuery limitation? Thanks.
  • Create New...