Friday - The Automatic FAQ Maker
In most cases, images from catalogue records are displayed using a query syntax for the 'img' tag's 'src' attribute:
...domain.co.uk/netpub/server.np?find (Post method)
...domain.co.uk/netpub/server.np?find&site=...etc. (Get method)
In each case the 'file' pointed to is 'server.np'. The web browser assumes the file in the src string is an image file and thus when dragging an image to the desktop (or other OS folder) it gives it the name 'server.np' when in fact the dragged image was called 'mypic.jpg'. Clearly you can rename the desktop copy with the correct name though that's a chore. Can you reset the name of the dropped image? Sadly, no. A safer course is to code the web pages suppress image dragging whilst offering a method of downloading a correctly named image. The latter is possible using the NP API's download query parameter (see NP manual pages 50-51).
The following technique was developed and tested using IE v6.0.200 (XP/SP2), Firefox v1.5.0.7 (Win/Mac) and Safari v2.0.4(419.3). Using other versions , especially older ones, or other browsers your results may vary!
It will be no surprise to hear that the current crop of significant web browsers (IE, Safari and Firefox) don't handle dragging in the same way and that several different strategies are needed. For IE, you need to trap the 'ondrag' event. This can be done by adding the following to the <img> tag:
ondrag="return false;"
So far so good, but this doesn't affect Safari/Firefox. For these, a different solution is needed. Add this to the <img> tag:
onmousedown="if(event.preventDefault){event.preventDefault();}"
Thus you will end up adding:
onmousedown="if(event.preventDefault){event.preventDefault();}" ondrag="return false;"
to your <img> tag. But wait, what does that 'event.preventDefault' do? Won't it stop you being able to make the image a clickable link? Luckily, no! If you need a deeper understanding look at a good DHTML book or look up event.preventDefault online.
Thinking of images inside hyperlinks brings us back to one last IE modification needed. If your <img> is inside an <a> element, such as where a detail preview is clicked to call a full original display, then you must add this to the enclosing <a> tag:
ondrag="return false;"
Why? If you don't do this, although the image itself doesn't drag, in IE (only) the resulting drop (onmouseup) over the desktop results in IE asking if you wish to create a link. You get a shortcut, called 'server.np', that points to the URL of the dragged link. The extra suppression of the ondrag in <a> helps this problem disappear.
You only need to modify the images/links users might drag and not all such elements on the page. In testing, these modifications have no detrimental effect on other functionality of the browser.
This article outlines the basic principles. A more ideal implementation is to use unobtrusive scripts by attaching event listeners in a cloent-sdie JS library file and then handling the events that way, resulting in being able to remove your inline "onXXXX" calls.
Question: Why do dragged images get named 'server.np'? [FAQ00384.htm]
Last Update:- 04 June 2007
Site and articles © Mark Anderson 2001-2007 - Visit my home page