SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to code links on my header?

    I just bought a new vbulletin style, currently the links in the header are like this



    when I looked in the header template its coded like this

    PHP Code:
    <tr><td><img src="images/header_left.jpg" width="295" height="140" alt="" /><img src="http://www.xxxxxxx.net/images/header_right.png" width="544" height="140" border="0" usemap="#map" alt="" />
        <
    map id="map" name="map">
          <
    area shape="rect" coords="156,30,238,107" href="/portal.php" alt="" />
          <
    area shape="rect" coords="238,29,312,107" href="index.php" alt="" />
          <
    area shape="rect" coords="385,31,455,106" href="http://www.xxxxxxxxx.net/forumdisplay.php?f=16" alt="" />
          <
    area shape="rect" coords="311,31,385,107" href="usercp.php" alt="" />
          <
    area shape="rect" coords="453,31,530,108" href="http://forums.xxxxxxxxx.com/register.php" alt="" />
        </
    map></td

    I dont know how he linked those

    but I want to make a custom header for my style which should look something like this.



    how do I code that in my header? any help will be really good

    thanks

  2. #2
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,233
    Mentioned
    239 Post(s)
    Tagged
    1 Thread(s)
    Maps were used long time ago but they are uncommon because there was a few problems with them (most of those problems have been sorted long time ago, still, they are not widely use due).

    You do not need a map to create your layout, although you could use a graphic program (any graphic program) to indicate you the coordinates (if you use photoshop, that would be the info palette).

    When you insert the image, you need to indicate that it will be a map so the browser knows that when the mouse click a certain area of the image, something will happen. That's the usemap attibute, indicating how the map is called (in this case, the name of the map is "map").

    The map area is used to let the browser know the clickable areas and where would they lead, and how much room they will take.

    The left corner of the picture would be coordinate 0,0.

    It depends which shape you use, you need to pass different information. For example, for a circle shape, you need the coordinate of the central point and the radius of the circle.

    For a polygon, you need the coordinates of each of the vertices.

    The only shape supported by all browsers is the rectangle. With the rectangle, you need the coordinates of the top left corner and the bottom right corner. The computer calculates the area.

    For example
    Code HTML4Strict:
    <area shape="rect" coords="156,30,238,107" href="/portal.php" alt="" />

    Means the there's a clickable area that begins at the point located 156,30 (156px from the top, 30 pixels from the left) and ending at 238,107 (238px from the top, 107 px from the left).

    If the mouse is clicked inside that area, the user will be taken to "/portal.php"

    PS: For the kind of header you want, you don't need a map.

  3. #3
    SitePoint Member
    Join Date
    May 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    Maps were used long time ago but they are uncommon because there was a few problems with them (most of those problems have been sorted long time ago, still, they are not widely use due).

    You do not need a map to create your layout, although you could use a graphic program (any graphic program) to indicate you the coordinates (if you use photoshop, that would be the info palette).

    When you insert the image, you need to indicate that it will be a map so the browser knows that when the mouse click a certain area of the image, something will happen. That's the usemap attibute, indicating how the map is called (in this case, the name of the map is "map").

    The map area is used to let the browser know the clickable areas and where would they lead, and how much room they will take.

    The left corner of the picture would be coordinate 0,0.

    It depends which shape you use, you need to pass different information. For example, for a circle shape, you need the coordinate of the central point and the radius of the circle.

    For a polygon, you need the coordinates of each of the vertices.

    The only shape supported by all browsers is the rectangle. With the rectangle, you need the coordinates of the top left corner and the bottom right corner. The computer calculates the area.

    For example
    Code HTML4Strict:
    <area shape="rect" coords="156,30,238,107" href="/portal.php" alt="" />

    Means the there's a clickable area that begins at the point located 156,30 (156px from the top, 30 pixels from the left) and ending at 238,107 (238px from the top, 107 px from the left).

    If the mouse is clicked inside that area, the user will be taken to "/portal.php"

    PS: For the kind of header you want, you don't need a map.
    Thank you so much for the info. That was really helpful


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •