WordPress.org

1. revdarkwing
   Member
   Posted 3 years ago #

   I have figured out how to edit the left sidebar of my theme to make another section of links but I am not sure how to insert a small banner instead of the text for the hotlink. Here is the code used to add a text link. I figure I just copy/paste it then change the text to the banner but don't know the code to insert the graphic in place of the text. Any help would be appreciated. This is the code for the link to wordpress that is included by default. Thanks

   <li><a href="http://www.wordpress.org/">WordPress</a></li>

2. Eric Amundson
   Member
   Posted 3 years ago #

   If you're trying to replace the text with an image, look at using some image replacement techniques.

   • http://en.wikipedia.org/wiki/Fahrner_Image_Replacement
   • http://www.stopdesign.com/articles/replace_text/
   • http://urlgreyhot.com/personal/weblog/phark_accessible_image_replacement

3. revdarkwing
   Member
   Posted 3 years ago #

   I'm not trying to make images that are readable, I am simply wanting to use small banners instead of text to create links in the sidebars of my blog. the code above is for the link and the text. I simply want to swap the word "WordPress" in the above example for a .gif banner that the reader can see and click on if he wants to follow the link.

   the links you gave me seem far more complex and have something to do with being able to still "read" the text. I don't care about that in this case. can we simplify the process a little here?
   Thanks

4. kohaku
   Member
   Posted 3 years ago #

   Instead of using the WP code for listing pages and links, you could just type everything out into different widget/sidebar areas.

   Widget 1: pages

   <a href="pg1"><img src="pg1.jpg" alt="pg1" border=0" /></a><br />
   <a href="pg2"><img src="pg2.jpg" alt="pg2" border=0" /></a><br />
   <a href="pg3"><img src="pg3.jpg" alt="pg3" border=0" /></a><br />
   <a href="pg4"><img src="pg4.jpg" alt="pg4" border=0" /></a>

   Widget 2: links

   <a href="lk1"><img src="lk1.jpg" alt="lk1" border=0" /></a><br />
   <a href="lk2"><img src="lk2.jpg" alt="lk2" border=0" /></a><br />
   <a href="lk3"><img src="lk3.jpg" alt="lk3" border=0" /></a><br />
   <a href="lk4"><img src="lk4.jpg" alt="lk4" border=0" /></a>

5. Eric Amundson
   Member
   Posted 3 years ago #

   I'm not trying to make images that are readable, I am simply wanting to use small banners instead of text to create links in the sidebars of my blog. the code above is for the link and the text. I simply want to swap the word "WordPress" in the above example for a .gif banner that the reader can see and click on if he wants to follow the link.

   I see.

   the links you gave me seem far more complex and have something to do with being able to still "read" the text. I don't care about that in this case. can we simplify the process a little here?

   You're right, Image Replacement techniques are a bit more complex (although they're definitely not rocket science).

   There are very good reasons to use them instead of substituting an image for text though:

   • If someone is browsing your site without images turned on, they can still read the content
   • Some mobile devices may not display images or CSS layouts
   • Blind or sight-disabled users who use screen reader software won't have any idea what the image is unless you have alt or replacement text
   • Search engines don't read images, they read text

   To each, his/her own, though. I, personally, would never substitute and image for text without providing a backup.

   Hope this helps.

Topic Closed

This topic has been closed to new replies.