none
How hotspots display on screen RRS feed

  • Question

  • OK so I'm working in Expression Web 2 and generally loving it b-u-t I'm stuck on hotspots.
    I would like to make the whole of a picture into a hotspot but have the border to be tansparent, rather than the blue which it currently displays hyperlinks. Help!
    Wednesday, August 13, 2008 3:09 PM

Answers

  • Right click the image and select picture properties.
    Click the Appearance tab.
    Set border thickness to 0

    Or create a class in your css and apply it to the image.

    .myclass{
    text-decoration: none;
    border: 0px;
    }
    FrontPage MVP
    Wednesday, August 13, 2008 3:15 PM
  • a img { texts-decoration: none; border: 0;}

    Then there is no need to add a class to the image.

    --
    Cheryl D Wise
    MS MVP Expression
    http://by-expression.com

    Registration now open for Expression, CSS and FrontPage Migration classes at: http://starttoweb.com

    Free Beginner tutorial: Creating a basic website video tutorial


    MS MVP Expression http://by-expression.com
    Wednesday, August 13, 2008 3:27 PM
  • SassyLassy said:

    OK so I'm working in Expression Web 2 and generally loving it b-u-t I'm stuck on hotspots.
    I would like to make the whole of a picture into a hotspot but have the border to be tansparent, rather than the blue which it currently displays hyperlinks. Help!

    Both Steve's and Cheryl's solutions will work fine (although I'm partial to Cheryl's because it eliminates having to assign a class to each of the image links ;-), so I don't have anything to add on that. I just thought that I would mention that, for the sake of clarity, in the future you might want to be aware of slight terminology differences.

    A "hotspot," as the term is typically used in Web work, usually refers to one of several clickable areas in a single image. This image and its associated code is called an image map, and the individual clickable areas, or hotspots, are defined by <area> tags within the map definition. See here http//www.javascriptkit.com/howto/imagemap.shtml for a clear and succinct explanation of image maps.

    So, when discussing single-image anchors, the reference would be just image link or image anchor, rather than hotspot, which would be used on image maps with multiple clickable areas. So, your message might have been, "Eliminate image link borders?" for example. No big deal, just a FYI for the future to help clarify when asking questions.

    cheers,
    scott

    Wednesday, August 13, 2008 4:52 PM

All replies

  • Right click the image and select picture properties.
    Click the Appearance tab.
    Set border thickness to 0

    Or create a class in your css and apply it to the image.

    .myclass{
    text-decoration: none;
    border: 0px;
    }
    FrontPage MVP
    Wednesday, August 13, 2008 3:15 PM
  • a img { texts-decoration: none; border: 0;}

    Then there is no need to add a class to the image.

    --
    Cheryl D Wise
    MS MVP Expression
    http://by-expression.com

    Registration now open for Expression, CSS and FrontPage Migration classes at: http://starttoweb.com

    Free Beginner tutorial: Creating a basic website video tutorial


    MS MVP Expression http://by-expression.com
    Wednesday, August 13, 2008 3:27 PM
  • SassyLassy said:

    OK so I'm working in Expression Web 2 and generally loving it b-u-t I'm stuck on hotspots.
    I would like to make the whole of a picture into a hotspot but have the border to be tansparent, rather than the blue which it currently displays hyperlinks. Help!

    Both Steve's and Cheryl's solutions will work fine (although I'm partial to Cheryl's because it eliminates having to assign a class to each of the image links ;-), so I don't have anything to add on that. I just thought that I would mention that, for the sake of clarity, in the future you might want to be aware of slight terminology differences.

    A "hotspot," as the term is typically used in Web work, usually refers to one of several clickable areas in a single image. This image and its associated code is called an image map, and the individual clickable areas, or hotspots, are defined by <area> tags within the map definition. See here http//www.javascriptkit.com/howto/imagemap.shtml for a clear and succinct explanation of image maps.

    So, when discussing single-image anchors, the reference would be just image link or image anchor, rather than hotspot, which would be used on image maps with multiple clickable areas. So, your message might have been, "Eliminate image link borders?" for example. No big deal, just a FYI for the future to help clarify when asking questions.

    cheers,
    scott

    Wednesday, August 13, 2008 4:52 PM
  • I tried this, but it didn't seem to work.
    Where should this (a img { texts-decoration: none; border: 0;}) be placed?

    Thanks.
    Tuesday, December 9, 2008 12:31 PM
  • AnneMarie T said:

    I tried this, but it didn't seem to work.
    Where should this (a img { texts-decoration: none; border: 0;}) be placed?

    Thanks.

    It should be singular, i.e. "a img { text-decoration: none; border: 0;}"

    If you go over into the CSS Properties pane on the left and either look in the Font category list or click "Show alphabetized list" and scroll down to the "T" section you will find it.

    It should be placed either in the <head> section embedded style sheet or, preferably, in your external stylesheet so it applies to all pages that reference it.

    cheers,
    scott
    Tuesday, December 9, 2008 12:58 PM
  • If you haven't used any styles on your page yet (or even if you have) look at the bottom right hand tool box, click the 'Apply Styles' or 'Manage Styles' tab and select 'New Style'.

    Select the 'Border' Category on the left hand side of the dialog box, put a zero in the 'Border Width' box (make sure the 'Same for all' box is checked), then go up to the top left hand selector drop-down and scroll down to select 'img'.

    Click OK and EW will create the style and put in in the right place on the page inside <style ..></style> tags, like so:

    <style type="text/css">
    img {
     border-width: 0px;
    }
    </style>


    Ian

    http://www.ew-resource.co.uk
    http://www.fp-resource.co.uk


    Ian Haynes
    Tuesday, December 9, 2008 3:10 PM
  •  Opps, Scott caught my typo.

    The CSS style definitions should go either in an external stylesheet (preferred) or in the head section of the page in a style block. How to create styles is part of the Basic Website tutorial at http://by-expression.com/content/tutorials.aspx

    ==

    Join the MVPs for a Live Meeting on "Shortcuts, Tips & Tricks in Expression Web" on Weds. Dec 10th. 9am CST

    Now registering for January session at Start to Web

    • Introduction to CSS
    • Introduction to Expression Web
    • Migrating from FrontPage to Expression Web

    MS MVP Expression http://by-expression.com
    Tuesday, December 9, 2008 11:21 PM