Issue with rel="imageName" when name contains ( ' )
===

Sorry for title, I didn't know how to express it any other way but I'll try make my problem clear here. So I have a table on my page that shows cardname, cost, set, rarity. This information comes from a database table. When a user is hovering over any cardname in the table there is an image popping up of the card and as soon as the mouse is removed the image closes (using a jQuery script for this). 

This is how the code of the cardname cells look:

    <td><a href='#' class='screenshot' rel='cards/$cardname.jpg'>$cardname</a></td>

Everything works fine except when $cardname contains ' which messes up the code and prevents the image from showing (example of a cardname not working could be "Faith's Shield"). I tried to use ´ instead but that doesn't seem to work either.

I know that this is probably not the best way to achieve what I'm trying to do but I'm quite new to webprogramming and this seemed like a simple trick to make it work.