Drag & Drop Graphic on a Graphic to Open Page

[logiclab]

Hello folks - Not being a Javascript programmer, I am requesting help with a project I am working on. I appreciate any help you might provide.

Pulling my hair out!

Regards,
logiclab
- - -

On the page, I have
a graphic of a fez.
6 additional graphics in a row at the bottom of the page.
Each of the 6 graphics are linked to a separate page and you can click on the graphic and go to the page.

The Javascript is on the following page.
http://mrmudd.com/scripts/fez.js

"I would like to be able to drag and drop the fez over any one of the 6 graphics and open the respective page."

On the front page, I have the following code for the hat. I don't see an onmouseup or onmouseend command. Could it be that simple?

<!--  begin Fez-O-matic  -->
<div id="fez" title="Mr. Mudd's Fez-O-matic"><p onmousedown="dragStart(event,'fez');"><span>FEZ</span></p></div>
<!--  end Fez-O-matic  --

The 6 graphics are wrapped in the following div.

<!-- begin content -->
<div id="content">
<a id="start_content"></a>
<ul>
  <li><a href="/movies/juno/">Juno</a></li>
  <li><a href="/movies/artschool/">Artschool Confidential</a></li>
  <li><a href="/movies/libertine/">The Libertine</a></li>
  <li><a href="/movies/dancer_upstairs/">The Dancer Upstairs</a></li>
  <li><a href="/movies/ghost_world/">Ghost World</a></li>
  <li><a href="/movies/bunny/">How to Draw a Bunny</a></li>
</ul>
</div>
<!-- end content -->

The CSS is

#home div#content ul li a[href*="G1"] {
background-image:url(/movies/g1/images/poster-thumb.png);
display:block;
}

#home div#content ul li a[href*="G2"] {
background-image:url(/movies/g2/images/poster-thumb.png);
display:block;
}

#home div#content ul li a[href*="G3"] {
background-image:url(/movies/g3/images/poster-thumb.png);
display:block;
}

#home div#content ul li a[href*="G4"] {
background-image:url(/movies/g4/images/poster-thumb.jpg);
display:block;
}

#home div#content ul li a[href*="G5"] {
background-image:url(/movies/g5/images/poster-thumb.jpg);
display:block;
}

#home div#content ul li a[href*="G6"] {
background-image:url(/movies/g6/images/poster-thumb.jpg);
display:block;
}

[jay@moduscreate.com]

Ext JS drag and drop with DOM nodes is covered on a Extjs.com blog article that i wrote:

http://www.extjs.com/blog/2009/09/13...p-with-ext-js/

[mschwartz]

Forgot this one:

[Animal]

Saw something like that from a distance last Friday. The cops wouldn't even let me walk my bike past because of the blood and guts and limbs everywhere. Some yuppie fool in his BMW couldn't control himself, and got intimately acquainted with a 40 ton gravel truck.

[jay@moduscreate.com]

@mschwartz... awww.

[logiclab]

Thanks jgarcia. Great tutorial.

[mschwartz]

@mschwartz... awww.

I shouldn't have carjacked your thread.