locked
hotspots effects RRS feed

  • Question

  • Hi.

    When adding a hotspot to an image for a hyperlink in EW, is it possilbe to create effects in EW similar to css on a regular page (hover colors, etc.)?

    Ron

    Monday, March 10, 2014 1:13 PM

Answers

  • Heh, heh... no, you were correct in your assumption. The image used for an image map is pretty much static once it is in place, and there are no CSS effects that I know of that can cause the equivalent of a :hover color change on a text hyperlink. Sorry...  ;-)

    I should note that this type of navigation, unless carefully done, has rightfully been called "mystery meat navigation." This, as you might guess, is not a term of approbation. I haven't seen your application, but you should just be aware that this navigation strategy has largely been abandoned by most professional developers.

    In case you're curious, and really ambitious, such an effect has been done once that I know of, by a fellow named Tedd Sperling. It can be found here. It requires fifty-one images, one for the map and one for each of the 50 states, and some... interesting CSS. It was done basically as a "because you can" exercise, and I don't consider it particularly desirable for application as a primary navigation method, but there you are. Check out the page source and the CSS if you want to duplicate the effect. If so, you clearly have more time on your hands than I do...  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Monday, March 10, 2014 9:16 PM
    • Marked as answer by Aston W Tuesday, March 11, 2014 2:22 PM
    Monday, March 10, 2014 8:34 PM

All replies

  • If by "effects" you mean altering the image itself, no. If you mean to swap out the image for another, then yes. Just use the :hover pseudo-selector, like so:

    .myimage:hover {
       background-image:url("images/mynewimage.jpg")
    }

    In fact, this is how button states (link, hover, active, etc.)are commonly achieved.

    If you mean something else, you will need to be more clear. Ask your question in terms of what you would like to DO, not whether a particular effect will work.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Monday, March 10, 2014 7:19 PM
  • For example, If I have an image containing words that are to be used as links. I bring the image into my expressionweb file, then use the Rectangular Hotspot feature in expressionweb and surround a word with the rectangle, then assign a hyperlink address to it. Once that has been done, is there an expressionweb tool that will enable  the linked hotspot to change the color of the text when hovered over? I assume not, but I thought I'd ask anyway.










    Monday, March 10, 2014 8:20 PM
  • Heh, heh... no, you were correct in your assumption. The image used for an image map is pretty much static once it is in place, and there are no CSS effects that I know of that can cause the equivalent of a :hover color change on a text hyperlink. Sorry...  ;-)

    I should note that this type of navigation, unless carefully done, has rightfully been called "mystery meat navigation." This, as you might guess, is not a term of approbation. I haven't seen your application, but you should just be aware that this navigation strategy has largely been abandoned by most professional developers.

    In case you're curious, and really ambitious, such an effect has been done once that I know of, by a fellow named Tedd Sperling. It can be found here. It requires fifty-one images, one for the map and one for each of the 50 states, and some... interesting CSS. It was done basically as a "because you can" exercise, and I don't consider it particularly desirable for application as a primary navigation method, but there you are. Check out the page source and the CSS if you want to duplicate the effect. If so, you clearly have more time on your hands than I do...  ;-)

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Monday, March 10, 2014 9:16 PM
    • Marked as answer by Aston W Tuesday, March 11, 2014 2:22 PM
    Monday, March 10, 2014 8:34 PM
  • You can sort of do what you want but not with an image map.

    <div style="background-image: somepic.jpg; height: 100px; width: 200px;">
    <a href="somelink.html" class="imagehover">Some Link</a>
    </div>
    a.imagehover {margin-top: 50px; margin-left: 10px; text-decoration: none;}
    a.imagehover:hover {background-color: #efefef;}

    Should give you something pretty close substituting your image, its height/width in div background and color you want on hover to the hover definition.

    You really don't want to use an imagemap. Those went out of style for good reason over a decade ago.


    Free Expression Web Tutorials
    For an Expression Web forum without the posting issues try expressionwebforum.com

    Monday, March 10, 2014 9:53 PM
  • I'm constantly surprised at the number of people who don't seem to have paid any attention to the websites they visit and how they work.

    I mean, when was the last time anyone saw a hotspot? Or buttons used for menus or animated GIFs of twinkling stars or people walking with ladders? Seriously. On a 12-year-old girl's Facebook page? Fine. Otherwise...

    The term "mystery meat navigation" was coined by the guy who runs the website www.webpagesthatsuck.com It's a long-standing website that highlights the worst of the web, including this gem from...MIT...http://cavs.mit.edu/

    Explore the web--and take notes! What works and what doesn't. Colors, fonts, colors of fonts, text alignment, font weight, typography, artwork, navigation. Lots of notes and lots of bookmarks of reference sites. What are other people in your industry doing? How do they do it (view the source code)? On what do I base this choice?" "Does this match the way people use the web?" "Does this make a good advertisement?" "Does this follow best advertising layout practices?"

    Ask yourself "Why am I making this decision? There needs to be a reason. A good reason--driven by the visitors' needs and expectations. What you want doesn't matter. Radio station programmers don't play what they want to listen to.

    I'm really not trying to be a smart alec, but seriously...the web (and the tools used to view it) has changed and people are used to an entire different experience than 15 years ago, especially with touchscreens (tablets, smartphones). Hover effects on a touch screen? Think about it.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Tuesday, March 11, 2014 1:39 AM
  • Cheryl:

    Putting my question about hovering effects aside, when you say image map, are you referring to the entire function of placing hotpsots on an image for hyperlinks?

    I'm not that up on the terminology. Are you suggesting not to use the hotspot feature? Is that what you mean by an image map?

     

    Tuesday, March 11, 2014 2:01 AM
  • Yes, that is what is referred to as an image map. There are many reasons which argue against their use, not the least of which is accessibility. Consider the difficulty faced by a vision-impaired or blind user using a screen reader to visit your page. What is the screen reader software going to make of that image map?

    Another thing that you personally have to keep in mind is your own personal liability under the UK Equality Act. This act is the equivalent to the Americans With Disabilities Act, and describes accommodations that developers must make to make their facilities (sites, in the current context) accessible to all visitors.

    Just because a feature exists in EW does not mean that it is a good idea to use it. Those lousy-ass, bloated, obsolete, obtrusive, javascript Behaviors are one example, as were the Layout Tables menu and panel that MS mercifully finally eliminated from EW in version four.

    Visitors expect a certain uniformity of user experience on the Web these days. Failing in that expectation may lead them to simply vote with their feet, leaving a site with usability issues in favor of the competition. Also, as Bill pointed out, what do you suppose comes of those hover effects on a touch screen, such as a phone or tablet? Just sayin'...

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Tuesday, March 11, 2014 2:47 AM
  • So, based on what you are saying, the only type of hyperlinking that should be used on images is with CSS on a single image with a single link?

    Note: The image I was going to use is 820px x 500px, with a few words and images
    that are fairly spread out insofar as "hotspotting" them.

    When I am viewing a website on a tablet and press on an image, is the link normally created solely as above, using css with the link tied to an entire image only?




    Tuesday, March 11, 2014 4:21 AM
  • First question: Why 820px?
    Second question: Why 500px?

    Third: How does that relate to the common aspect ratio of displays (16:9, 16:10, 4:3)?

    If someone is viewing that image (with the spread out hotspots) on a tablet and they turn it vertically, you've just screwed anyone whose tablet or smart phone doesn't have at least a full HD 1080 display. The 800px exceeds the available width in portrait mode on 59 of the 89 tablets currently on the market, from all the big names: Kindle, Acer, Asus, Toshiba, Samsung... Can they zoom out to see it? Sure. Can they read the words when zoomed out? Can they navigate? How about on a smart phone?

    I'm not saying that all decisions have to be made based on tablets and smart phones. But I am saying that there has to be a good reason--from the users' point of view--for every decision you make in the site. Web design for business is advertising, it's not an expression of your creativity.

    I can't imagine wasting 820 x 500 px for such navigation. Even on a regular monitor, it pushes the real content off the bottom of the screen. And the content is the most important part of the site--it is advertising, after all.

    Reality check--nobody cares about navigation (or headers and footers). It's just a way to get around and it has to be efficient--for the user. It needs to be the same on every page and it needs to be logically laid out. And it needs to get out of the way of the content.

    I, for one, can't remember the last time I went to a site that used such tricks. If there are still professional sites that use them, I'd like to see it, if you can post a link.


    Things Liberal Arts graduates never like to hear:
    “…which means you are going first in Double Jeopardy.”

    Tuesday, March 11, 2014 12:28 PM