On Mon, 25 Sep 2006 13:46:23 +1200 Andy Leach <[EMAIL PROTECTED]> wrote:
> I wonder if ImageMagick can convert text > > to image using a particular font? There goes my afternoon... > > > > cheers, > > > > Andy > > Sorry for replying to myself, didn't take quite as long as thought! > > convert -size 200x30 xc:transparent -font Arial.ttf -fill black > -pointsize 12 -draw "text 5,15 '[EMAIL PROTECTED]'" addr.png > > from http://ask.metafilter.com/mefi/44736 > > Cheers, > > Andy Thanks, I've used this for the menus... using css, a: pseudo classes and background images to emulate the text highlighting. Had to work that bit out myself - I've never seen it used anywhere. If anyone's interested, ( w3c compliant ) Menu bar at top right of screen. Each button is a 150x30 pix image. Display the 'on' button as an image for the selected page... image swapping with no javascript - can't be that bad! the css... div.menubar { margin-top: 22px; float: right; height: 30px; } div.menubar ul { padding: 0; margin: 0; border: 0; } div.menubar ul li { float: left; list-style-type: none; text-decoration: none; padding: 0; margin: 0; border: 0; width: 150px; height: 30px; } div.menubar ul li a { display: block; text-decoration: none; height: 30px; } div.menubar ul li a.home, div.menubar ul li a.home:link, div.menubar ul li a.home:visited { background: #ebcf89 url(/images/buttons/home-off.png) no-repeat; } div.menubar ul li a.home:hover, div.menubar ul li a.home:active { background: #ebcf89 url(/images/buttons/home-on.png) no-repeat; } div.menubar ul li a.home, div.menubar ul li a.mens:link, div.menubar ul li a.mens:visited { background: #ebcf89 url(/images/buttons/mens-off.png) no-repeat; } div.menubar ul li a.mens:hover, div.menubar ul li a.mens:active { background: #ebcf89 url(/images/buttons/mens-on.png) no-repeat; } div.menubar ul li a.womens, div.menubar ul li a.womens:link, div.menubar ul li a.womens:visited { background: #ebcf89 url(/images/buttons/womens-off.png) no-repeat; } div.menubar ul li a.womens:hover, div.menubar ul li a.womens:active { background: #ebcf89 url(/images/buttons/womens-on.png) no-repeat; } div.menubar ul li a.contact, div.menubar ul li a.contact:link, div.menubar ul li a.contact:visited { background: #ebcf89 url(/images/buttons/contact-off.png) no-repeat; } div.menubar ul li a.contact:hover, div.menubar ul li a.contact:active { background: #ebcf89 url(/images/buttons/contact-on.png) no-repeat; } And the html snippet ( home page selected )... <div class="menubar"> <ul> <li><img src="/images/buttons/home-on.png" alt="Home" /></li> <li><a class="mens" href="/mens.html" /></li> <li><a class="womens" href="/womens.html" /></li> <li><a class="contact" href="/contact.html" /></li> </ul> </div> I'm sure those who really know what they're talking about could improve dramatically ( almost certainly don't need the active class )... maybe I should patent it first (: Cheers, Steve
