Need to shorten HTML code

[jivey]

I'm a novice at HTML and need help. We have this code and it takes up most of the allotted space in the field. Looking to shorten it.

Here is the code:

<a class="thumbnail" href="#thumb"><font style="color:#3399ff; font-size: 8pt; text-decoration:none;">View</font><span><img src="PD.jpg" /></span></a>

Is all that necessary to accomplish the task? Can anything be shortened?

Thank you in advance.

[Beverleyh]

It depends on what you're trying to do but it should be possible using just the <a> tag and CSS;

HTML
<a class="thumbnail" href="#thumb">View</a>

CSS

.thumbnail { display:inline-block; background:url(PD.jpg) 0 0 no-repeat; width:150px; height:150px; color:#3399ff; font-size:8pt; text-decoration:none; border:0 }

You could also lose the "View" text and insert it via a pseudo element instead https://www.google.co.uk/search?q=pseudo+elements+css&gws_rd=cr,ssl&ei=KGOEVYTqL4qrsgHPxqww

If you need more help you'll need to show us a demo of what you have with a link to your page, and maybe a mockup image to illustrate.

[jivey]

5694

Thank you so much for replying.

I've attached a screen shot. When someone places their cursor over the word "view" then the picture comes up.

This is an option in our shopping cart and the field is limited, so we were just wondering if there was anything we could do to shorten it.

[Beverleyh]

This changes things.

It might not be possible to reduced the markup if the CSS is targeting the span, so that the image is revealed on hover for example.

Alternatively, JavaScript may be be targeting the span. That's something you'll need to look in to and will dictate what you can and can't change of the markup. Maybe try this instead?

HTML

<a class="thumbnail" href="#thumb">View<span><img src="PD.jpg" /></span></a>

CSS


.thumbnail { color:#3399ff; font-size:8pt; text-decoration:none }

Have a play around with the sample code I provided and report back with your changes, along with a link if you need more help. It's impossible for anybody to help diagnose your problems without a page to test in.