Dr Design - Media Player, Validators and More!

Hey guys! Welcome to my regular spot. I’ll be here in the first week of each month to answer your questions. So get writing to me at drdesign@sitepoint.com!

Protect What’s Yours

Hey Doc! I run a photography site, and I’ve included a lot of my own shots on the site. How can I stop users from taking these photos from my pages? — Phillipe

Phillipe, this is probably one of the questions I get asked most often. Authors feel that since they created their pictures they should have the ability to protect others from steeling them, and rightfully so. I wish I could tell you there was a foolproof way to protect your images. Here are some of the normal suggestions and their advantages and pitfalls though:

No Right-Click Script: This little bit of JavaScript will present a little warning which says something to the effect of “Hey, Don’t Steal!” when users use the right click button, which is a fairly standard way of saving individual images. The downfall to this is that many people use the right-click for good things such as opening links in new window, getting more information on a web page, etc.

Beyond that though, it has been deemed as “unprofessional” and many Web surfers will wonder what you have to hide, or what you think is so special and may often leave before they’re done, out of sheer annoyance. Even if you could protect your images with some kind of no right-click script, the reality is that all Web browsers save a copy of your images to the user’s machine for future use, so a savvy user could easily go into their Cache and view your images anyways!

Watermark: Perhaps the best solution, placing a simple watermark into your photos will mean that should people steal them they will either have to crop out your watermark or ignore it, in which case you do get credit. The real drawback with a watermark is that the more you want to protect your image, the less usable your picture becomes. Sure placing a watermark diagonally across your image means nobody can steal it but then the question becomes: will anyone even look at your site?

Embed it in Flash or Java: Many Web authors try and get around using actual images in their sites by putting the images inside a Flash Movie or a Java Applet. Though this means users can’t directly save the images to their machines, they can still do a Screen Capture with the PrintScreen button on most modern keyboards.

Though this probably hasn’t brought you much optimism, one of the keys to being part of the online community is the ability to share and grow. Why do you want to have a Website with your pictures on it? Probably because you saw someone else’s and admired their work. I would encourage you to look at many of the famous photographers that have sites on the Net — you’ll find that few use any kind of protection mechanism as Web photos are of such poor quality for printing that it’s unlikely anyone will ever use them outside the Internet. You could of course leverage this tendency: provide small and medium previews of your images, and sell larger prints from your Website!

Hope this helps, Phillipe. For more detail on disabling right click and protecting images or code, be sure to look out for Rosie Wise’s article on this very topic — it’ll appear on SitePoint in the coming week!

Timed Popups

Dr. Design, I want to include a pop-up on my site (to increase available space for my advertisers). I want the popup to appear when users access my homepage, but then I want it to disappear again after ten seconds. I’d also like to show a timer on the popup itself that says ‘closing in…’ and tells the user how many seconds are left until the popup disappears. How is this done? — James

No problem James! First off, let’s take our “Window Opener” code from one of the previous articles (From PopUnders to Rollovers):

<html> 

<head> 

<script language="JavaScript"> 

<!-- hide from JavaScript-challenged browsers 

function openWindow(url, name) { 

popupWin = window.open(url, name, 'width=400, 

height=600,left=100,top=100') 

} 

// done hiding --> 

</script> 

</head> 

<body onLoad="openWindow('myAnnouncer.html','Announce');"> 

</body> 

</html>

This will open up a small window with our myAnnouncer.html file in it. Our myAnnouncer.html file will look something like this:

<html> 

<head> 

</head> 

<body> 

<div id="Clock" align="Center"> </div> 

 

<script> 

now=10 

 

function tick()  

{ 

 timeString=now; 

 Clock.innerHTML = "Window will close in: " + timeString; 

 now=now-1; 

 if(now==0) 

 { 

   window.close(); 

 } 

 window.setTimeout("tick();", 1000); 

} 

 

window.onload = tick; 

 

</script> 

Put your text here 

 

</body> 

</html>

Drop Down Navigation

Doctor, I want to create navigation menus that ‘drop down’ when you mouse over the link… For instance, when you mouse over the ‘Company’ link on my site, I want a list of subdirectories to be displayed. And when you slide your mouse over an item on the subdirectory, further subdirectories are displayed as needed, etc. This is similar to the menu Windows uses for programs, where the programs cascade to the right (or left) into ever more specific applications. How can I build this? — Jessica

Jessica, I know exactly what you’re talking about. The creation of Dynamic Menu Systems should be one that is entered into carefully and with full regard for your users — so think about them first. If you decide that this is the way you want to go, here are a few decent systems that will allow you to have submenus:

Print Vs Screen Resolution

Doc: wondering if you could help me. I’m currently designing a Website at 700 pixels wide. Unfortunately, when the page prints, the words are cut off. I don’t want to design at under 640 as most users run at higher resolution than that, but I need these pages to be printable. Any suggestions? — Kat

Kat, if you specify a fixed width for your table or items, then they will always display at that width. A much better technique, especially for printing, is to specify a % width for your table. This way your page will scale well to any size and will print beautifully!

Broken Table Code

Dr. Design, can you check out my code? I’m trying to show everything that from a table where newsid = $comments. I have 2 records that have the same newsid, so it should show 2 records. Instead, what it does is keep showing 1, but many times down the page it will randomly show the 2. Here’s the code:

$sql = "SELECT newsid, comname, comdate, comcontent FROM comments   

WHERE newsid = $comments";   

while ($getnews = mysql_fetch_array(mysql_query($sql))) {   

echo ("<TR><TD>Name: " . $getnews["comname"] . "</TD></TR>");   

echo ("<TR><TD>Posted at: " . $getnews["comdate"] . "</TD></TR>");   

echo ("<TR><TD>Comment: " . $getnews["comcontent"] . "</TD></TR>");  

echo ("<TR><TD><HR></TD></TR>");   

}

What’s going on? — Brian

Brian, the problem is that each time you run “$getnews = mysql_fetch_array(mysql_query($sql)” you’re calling the same query. Try this instead:

$sql = "SELECT newsid, comname, comdate, comcontent FROM comments   

WHERE newsid = $comments";   

$r = mysql_query($sql);   

while ($getnews = mysql_fetch_array($r)) {   

echo ("<TR><TD>Name: " . $getnews["comname"] . "</TD></TR>");   

echo ("<TR><TD>Posted at: " . $getnews["comdate"] . "</TD></TR>");   

echo ("<TR><TD>Comment: " . $getnews["comcontent"] . "</TD></TR>");   

echo ("<TR><TD><HR></TD></TR>");   

}

Embedding Media Player

Dr Design, I’d like to embed Windows Media Player files into my Web pages. How do I do this, and where can I find more information? — Trish

Trish, it’s easy to use the Windows Media Player on your page with minimal exposure of its built-in controls. Simply embed the control in your page using the <object> tag.

By default, when you use Media Player you’ll see the built-in controls for play, pause, stop, and volume in addition to the video playback frame. However, by setting the ShowControls parameter to False, these controls will be hidden, which means you can then provide your own control mechanism through script. Here is some basic code that will display the viewer without showing any controls:

<OBJECT ID="mPlayer" classid="CLSID:22d6f312-b0f6-11d0-94ab-  

0080c74c7e95" TYPE="application/x-oleobject">   

<PARAM NAME="FileName" VALUE="playback.asf">   

<PARAM NAME="ShowControls" VALUE="FALSE"> </OBJECT>

You would then use script code similar to this:

<img src="play.gif" title="Play" onclick="mPlayer.Play()">   

<img src="pause.gif" title="Pause" onclick="mPlayer.Pause()">   

<img src="stop.gif" title="Stop" onclick="mPlayer.Stop()">

to play, pause, or stop the player. There are many other properties, methods, and events exposed by the Media Player that you can use to customize your solution. Check out this resource for more detailed Windows Media Player programming information.

Handy Validators

Hey Doc, do you know of a site where I can copy and paste my HTML code into a box and it will check it over for me? I’m using Dreamweaver, and it generates a ton of bad code that isn’t even used (mostly when using tables). This just creates a mess and when I start using includes for news and stuff everything gets really out of shape. Help! — Jordan

Jordan, here are some great validators you can check out. This list was compiled by the kind folks at www.sitepointforums.com!