Read More Button

[wOne_30]

Hello Community,

I am trying to modify an image so that when you click on the image it takes you to a url.

Here is the code I have now for the image without linking it to a url.

<a href="#" ><img alt="" src="images/more.gif" style="margin-right:5px; " align="right"></a><br>

Any help would be greatly appreciated!

Thanks,

Wes

[choster]

What is it exactly you need help with? Strictly speaking the code you've provided should work, although

* you should provide "read more" as your alt attribute text; that's what the alt is for
* the align attribute will cause your image to move out of the flow and be pushed to the right side of the container, which may not be the behavior you desire. Depending on the version of HTML you are using, it may be deprecated, anyway
* for inline navigational links, I almost always favor text over icons.

I would also generally advise against a long list of generic "read more" links, however. It's unfriendly to people using text readers, and even when you visually browse a list of articles, the eye jumps to the repetitive links without comprehending the context, slowing reading. There are a number of articles about improving accessibility for the read more link, such as [webaim.org...] and [smashingmagazine.com...] .

[wOne_30]

I am trying to get the "Read More" button do go to a completely different URL. I am going to only have half of the paragraph shown on the webpage. I would like to make it to where when click the "Read More" button would take you to the rest of the paragraph.

[rocknbil]

This may be stupid, but just in case, change this

<a href="#">

to the actual url/file.

<a href="more-info.html">

<a href="http://www.example.com">

In another thread someone's having trouble with a link, and the issue may be similar: if you are using absolute positioning in your layout, one of the "higher layers" may be covering up the link. It's a long shot, but you can look into that. A normal hyperlink around an image should work.

[wOne_30]

Ok, I am a little confused! Here is the link I want the read more button to pull up. [amgardens.com...]

I take it I should put that url where you have example.com correct? I am sorry I am a little lost this is my first time trying to code a button/url like this!

[wOne_30]

Ok, the <a href="http://www.example.com"> would work but you are correct. The flash menu is kind of overlaying the button apparently. It won't allow me to click the button at all. I know this is a noob question but what can I add to the code below to just drop the button a little bit so it won't be hidden?

<a href="http://example.gif" ><img alt="" src="images/more.gif" style="margin-right:5px; " align="right"></a><br>

On Main Page in the middle just under the brief description.

[edited by: wOne_30 at 8:26 pm (utc) on Jan. 13, 2010]

[Fotiman]

Note, URLs are not allowed, and the links you posted will be removed.

With that said, I was able to take a quick look at your page, and the problem is that you have one giant Flash object with sits on top of your HTML content. That object includes both your site navigation, which in itself is a very bad idea as your site will be inaccessible to users that don't have Flash (and to search engines). I would recommend splitting that flash object up into 2 flash objects, one containing the image, and one containing the navigation pieces (or better yet, replace the navigation one with a non-flash alternative that is accessible).

+--------------+
¦+------------+¦
¦¦.....NAV....¦¦
¦+------------+¦
¦+---++-------+¦
¦¦IMG¦¦CONTENT¦¦
¦+---++-------+¦
+--------------+

Instead of:

+--------------+
¦+------------+¦
¦¦.....NAV....¦¦
¦¦IMG.........¦¦
¦+------------+¦
+--------------+

on top of:

+--------------+
¦+------------+¦
¦¦............¦¦
¦¦.....CONTENT¦¦
¦+------------+¦
+--------------+

[wOne_30]

So then there is no way to go into the flash file and set the z depth to be below the button?

[Fotiman]

You might try playing with the wmode attribute and setting the z-index on the layer containing your flash.
[kb2.adobe.com...]

[wOne_30]

the wmode is already set to transparent.

Here is the code I have so far:

<body>
<table style=" background:url(images/bg-mid-f.jpg) left repeat-x #3E6E1B; background-position:0 375px">
<tr>
<td style="height:387px; background:url(images/bg.jpg) top repeat-x">
<table style="width:763px; background:url(images/bg-top.jpg) top left no-repeat">
<tr>
<td >
<div class="_text" style="margin:0px 0px 0 0px; position:absolute">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="763" height="387">
<param name="movie" value="flash/header2_v8.swf?button=1">
<param name="wmode" value="transparent">
<param name="quality" value="high">
<param name="menu" value="false">
<!--[if !IE]> <-->
<object data="flash/header2_v8.swf?button=1"
width="763" height="387" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="menu" value="false">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!--> <![endif]-->
</object>
</div>
<img alt="" src="images/logo.gif" style="margin-left:121px; margin-top:61px"><br>
<br style="line-height:30px">
<table class="no_class">
<tr>
<td style="width:436px;"></td>
<td style="width:285px;" class="h_text">
<img alt="" src="images/welc.gif" ><br>
<br style="line-height:25px">
<strong>America’s Gardens</strong><br>
<br style="line-height:8px">
My Site Description.

<br>
<br style="line-height:1px">

<a href="http://example.com/example.gif" ><img alt="" src="images/more.gif" style="margin-right:5px; " align="right"></a><br>