Nature Photographers Network
This is the preserved archive of the original Nature Photographers Network. The community continues at naturephotographers.network.

need some HTML help

Discussion

13 replies
Posted by Luke Ormand on February 22, 2011 at 10:11 PM
I've been doing a lot of work on my blog lately including a good deal of linking to Amazon through Amazon Associates which is relatively simple to use. However, I've tried implementing their Text Only link in conjunction with the Product Previews Script with limited success. While the link works (when you hover the product comes up) there is a white box next to the text.

I'm a complete n00b when it comes to HTML but I tried looking for some sort of anomaly that would be causing this and couldn't find anything. So, can someone help me out a bit?

Here is the link to the page where I've tried to implement this (About Me) and you can see the white boxes. Please ask any and all needed questions!

Posted by Max Waugh on February 22, 2011 at 11:10 PM
Luke, in the code there's an image next to each link, which is specified at 1x1 pixels (though the boxes appear larger than this). Do you know if they're absolutely required? I know some services use a "tracking pixel" but in this case I don't know if it's necessary if you have your affiliate code in the text link... or if it's needed for the mouse-over script to function.

Wondering what would happen if you removed the image... you may want to try it to see if it still works without it.

Max
Posted by Luke Ormand on February 22, 2011 at 11:12 PM
It shouldn't be required... can you show me the section of code that should be removed?
Posted by SandyRichardsBrown on February 22, 2011 at 11:15 PM
You bum! I was really hoping to get a real glimpse of you on your blog, after all this time...not to be! :smile:
Can't help with the HTML, sorry..
New banner looks great, though..
Sandy
Posted by Luke Ormand on February 22, 2011 at 11:18 PM
Sandy,

I can't show my face! Then birders would know who I am in the field and that's the last thing I want haha. You're lucky I use my real name :biggrin:

But, for what it's worth I really do like that photo... so it's not JUST about not showing my face.
Posted by Lon Overacker on February 22, 2011 at 11:19 PM
Luke,

Don't know what browser you're using, but with Firefox you can go to "View>Page source" and look at the code. In IE, "View>Source." (do this while the "about me" page is loaded.) This let's you look at the html source code. Do a text search for "Exploring" and you'll see where the code is. The little white box is an image file. Look for the string "<img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=birdso01-20&l=as2&o=1&a=1932916342" style="border: none !important; margin: 0px !important;" width="1" />"

The "<IMG> is a tag to describe and insert image files. That is the source of the little white box.

Now, if you have the capability of editing and uploading and replacing that file, simply remove that text I highlighted, re-save and upload.

But I'm not sure what capabilities you have with Blogspot. If you can edit these strings and html file then I would try that. Otherwise, you're at the mercy of Blogspot and/or Amazon.

I use WordPress, but I suspect this is similar. You're hosting company may or may not be hosting the blog application. If your host is and you have access to source files with editing capability you should be able to do this.

Hope this helps. BTW, looking at the source code, editing and changing may start you down a road you don't want to go.... :biggrin: (been coding my site for 15 years now....)

Lon
Posted by Luke Ormand on February 22, 2011 at 11:27 PM
Lon,

I have full HTML access via the blogger edit tool.

Since I obviously can't post the HTML code here... here is an image of the code for one of the links. Can you tell me what section needs to be removed?

And I'm a little fearful of starting to learn HTML but I don't like being at the mercy of other's!
Posted by Lon Overacker on February 23, 2011 at 12:41 AM
Luke,

Sorry, I didn't realize when I cut-n-pasted the code, that it actually turned in to actual code and displayed as a blank.

Look for the code directly after the "...nature on Long Island</a>" string. What starts as "<img alt=" is the string you need to remove. It ends with the closing "/>" after the "width statement"

I'll post this and see how this comes back. The problem is that these text boxes for comments are "html" active and by typing "" and <> etc. the code gets acted upon.

Lon

p.s. man this is frustrating, I'll send you an email...

p.s. 2. remove the html code between the arrow brackets that include the IMG tag. IMG = image and remove everything and including the < and >.

Posted by Max Waugh on February 23, 2011 at 12:46 AM
Try losing everything between (and including) the:

< img... width="1" />

That's the image tag.

Max
Posted by Lon Overacker on February 23, 2011 at 12:48 AM
Max, how did you do that? :confused:
Posted by Max Waugh on February 23, 2011 at 12:56 AM
I had to use the HTML code for the "carrot" signs... &lt; and &gt; :smile:

Max
Posted by Luke Ormand on February 23, 2011 at 11:46 AM
Thanks guys, I'll try it when I get home... I don't think I need that data in there.
Posted by Luke Ormand on February 23, 2011 at 8:24 PM
It worked! Thanks a million guys!
Posted by Max Waugh on February 23, 2011 at 10:16 PM
:toast: