Jump to content


Photo

How to label objects in sketch?

  • Please log in to reply
3 replies to this topic

#1 S1mas

S1mas

    Mariner 2

  • -----
  • Posts: 266
  • Joined: 08 Dec 2009
  • Loc: Lithuania

Posted 03 February 2010 - 02:56 PM

Hi all,

From time to time I see sketches with labels which ones activates when mouse is hovered over a sketch. How is that possible to do?

#2 Jeremy Perez

Jeremy Perez

    Vanguard

  • *****
  • Posts: 2139
  • Joined: 12 Aug 2004
  • Loc: Flagstaff, Arizona, USA

Posted 03 February 2010 - 04:08 PM

Hi S1mas,

Javascript rollover effects can be great tools, but they can also be a little tricky to work with. For example, you can't use them on discussion forums such as this, or on any hosting program that doesn't give you control over javascript.

The basics:
1) You place a series of javascript routines in the Head of your webpage or place a link in the head that points to a javascript source document on your site.
2) You call out those scripts wherever you place a javascript image in the Body of your page.

If you are using weblog software that is flexible enough (such as Movable Type or WordPress), you can have it insert the javascript or javascript-link in the head of every page on your site. The key is to turn off any auto-formatting in your weblog software. Otherwise, it will try to format the script you add to your rollover images, and this will break the rollover effect. (MovableType is great about this--WordPress is a pain in the neck, because it REALLY wants to autoformat even when you try to turn it off.)

Here is a site with details: Idocs Guite to HTML: Rollover Images

In practice, this is basically how it looks in the source code. (This is the page where the effect is used: Mars CM 265

Attached Files



#3 S1mas

S1mas

    Mariner 2

  • -----
  • Posts: 266
  • Joined: 08 Dec 2009
  • Loc: Lithuania

Posted 04 February 2010 - 10:43 AM

Thanks Jeremy,
Seems someday Ill need to invest some more time for that -
Now that sounds "little" tricky for me :)

#4 Jeremy Perez

Jeremy Perez

    Vanguard

  • *****
  • Posts: 2139
  • Joined: 12 Aug 2004
  • Loc: Flagstaff, Arizona, USA

Posted 05 February 2010 - 12:53 PM

There is another method for generating rollovers that I haven't experimented with yet, but it looks promising. This method uses CSS to create the effect instead of Javascript: Pure CSS Image Rollovers

Instead of saving 2 different versions of your image, you make a single image where both versions are stacked side-by-side or one-above-the-other. Then you create a style that crops to only one half of that double image and then have the image shift up-down or left-right if the user hovers their mouse over it. The benefit is that the whole image loads at once, so there's no lag when the user moves their mouse over it. It also makes the experience available to users who don't have javascript enabled.

From checking my web stats, what I've found is that most people do have javascript enabled in their browsers, so I don't think that's a huge issue. However--I have found that rss feed collectors like portaltotheuniverse.org won't display your image if it's enmeshed in a javascript cage. I may try moving to this css method before too long. I'd just have to change my workflow in a few places.






Cloudy Nights LLC
Cloudy Nights Sponsor: Astronomics