Thursday, April 17, 2008

jQuery Quick Tip: Rollover images with jQuery

Update: Demo page created

There are several sites that show you how to create rollover images with jQuery (just search Google, Ask, A9, Yahoo etc) for "rollover image jquery"), but they do sometimes have more code than needed (like using $(this).attr("src") instead of this.src for determining the image source. Here is another method that does not use jQuery unnecessarily (which may be faster if there are lots of images).

Create two images, for the 'off' state (when mouse is not over it) and the 'on' state (on mouse over). Name them button_off.gif and button_on.jpg (the button bit can be anything, as can the extension (.gif) - the important bit is the _off and _on suffix.

HTML code:

<a id="mylink" href="/go/somewhere/"><img src="/images/button_off.gif" alt="" title="" border="0" width="100" height="30" /></a>

Then in your $(document).ready:

$("#mylink img").hover(
 function()
 {
  this.src = this.src.replace("_off","_on");
 },
 function()
 {
  this.src = this.src.replace("_on","_off");
 }
);

Due to its generic nature, it can be applied to multiple images, e.g. those with a class .rollover set $("img.rollover").hover...

Monday, April 14, 2008

pastebin sites

A pastebin is a site that allows you to share text with other, most commonly source code, but could be anything else as well (like prose or poetry - e.g. you are writing a novel or poem and want to share what you write). They are useful if you do not have a web site to post what you have written and want to share it to get any feedback (like spotting any bugs or spelling mistakes).

They allow you to post without registering or paying and the pastes normally expire after a set period (e.g after a month) so as to reclaim any lost disk space for the host. Source Code highlighting is often a feature of many as well. Some of them offer more than this, like comparison (e.g. diff's), password protection / encryption and notifications (to alert you of new pastes, or replies to pastes - normally through a chat system like IRC). The open nature of them could render them susceptible to spam though.

The following is a list of pastebin's I am aware of. All offer syntax highlighting.

  • pastebin.com - possibly the first site to do this, you can view recent pastes and search them
  • pastebin.ca - more features than pastebin.com: encryption, tags and description
  • nopaste.info - description, name, tab width
  • LodgeIt! - very simple interface, powered by jQuery, reply to pastes, view diff's, remote queries (XML-RPC). You can't see recent pastes or perform a search though (although this probably mitigates spam somewhat)
  • pastie - separate code into sections, mark as private, select a theme when viewing pastes
  • dpaste - associate a title and your name / email