Mortuux
Mortuux

Reputation: 59

How could I get the arrow image to be placed on the left of "answer1"

Here's the code, a bit messy, going to fix it up after this is answered.

<table>
    <tr>
        <td>
            <a href="" onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';" onmouseout="document.getElementById('place-holder-1').src='';"> 
                website screenshot service 
                <img src="" id="place-holder-1" style="zindex: 100; position: absolute;" />
            </a>
        </td>
    </tr>
</table>

Here is a live demo: http://jsfiddle.net/Lrnvrdub/

And thanks for the help it's greatly appreciated.

Edit: all of the replies work fantastically but when I try to adjust the size of the image, I have tried using both css and html, an empty square is in the image's place when the link isn't hovered.

Here's an example: http://jsfiddle.net/csewukgs/

Upvotes: 0

Views: 93

Answers (4)

jbarreiros
jbarreiros

Reputation: 1103

Another option to Fabio's solid answer is to use a background image.

<a class="bullet" href="">Answer1</a>
<a class="bullet" href="">Answer2</a>

.bullet {
    background: url("path/to/image.png") no-repeat 0 50%;
    padding-left: 18px;  //width of image, plus some extra spacing
}

The benefit being that if you have a list of links, you do not need to add an img element to every one.

One caveat, if the image is non-decorative and actually communicates something important, do use an img element with an appropriate title attribute, which is helpful to screen-reader users.

<a class="bullet" href="">Answer1 <img src="..." title="The correct answer"></a>

// use Fabio's float:left solution

Upvotes: 2

Scott Mielcarski
Scott Mielcarski

Reputation: 760

This is my solution: http://jsfiddle.net/1Latpnzn/2/

It assumes that you want to shift the text to the right to make room for the image. By setting the placeholder to be as follows:

#place-holder-1 {
    display: inline-block;
    vertical-align: middle;
}

reordering the html:

<a href="" id="hover-link">
    <img id="place-holder-1" />
    <span>Answer1</span>
</a>

and removing the position: absolute; image can be positioned to the left of the text.

Upvotes: 1

Bogus Hawtsauce
Bogus Hawtsauce

Reputation: 483

If you can change the position from absolute to inline block and move the image before the "answer 1" text that will work, and to get it to be aligned with the text you can add the vertial-align:bottom style

<a href=""
  onmouseover="document.getElementById('place-holder-1').src='graphics/websites/labyrinth/labyrintharrow1.png';"
  onmouseout="document.getElementById('place-holder-1').src='';">
  <img src="" id="place-holder-1" style="zindex: 100; position: inline-block; vertical-align:bottom" />
      Answer1
</a>

Upvotes: 0

Devin
Devin

Reputation: 7720

delete the inline style and add this

a img{float:left}

you may want to add some margin as well, but you'll get the idea

Note: it's a good idea to give a class to that img so you don't have to be this generic. Like

.bullet{float:left}

HTML

<img class="bullet" src="uyourimage" id="place-holder-1"  />

Upvotes: 2

Related Questions