CODEWITHSUNDEEP
javascript
flemingworks
flemingworks

Reputation: 7

Add space before image, javascript

I am trying to put some space to the left of the radio-play.gif button. What can add to this code to achieve that?

Thanks!

// Last (only one on Mac) row has the VCR buttons.
//
s += '<td>';
s += '<img border="0" src="/images/dot.gif" width="81" height="' + gPreBtnVertSpace + '"><br>';
s += '<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';

if (player != 'MP3')
    s += '<img alt="STOP" src="' + imageDir + 'radio-stop.gif" width="72" border="0" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'stop\')">';

s += '</td></tr>';

document.write(s);

// removing mute button
var myEl = document.getElementsByName("mute");
var elP = myEl[0].parentNode.parentNode;
elP.removeChild(myEl[0].parentNode);

Upvotes: 0

Views: 921

Answers (4)

Christoph
Christoph

Reputation: 51191

Either set a margin to the img tag (it needs to be display:inline-block; for this) or add a &nbsp; (No breaking space).

Probably the margin would be my preferred way, e.g.

img{
  display:inline-block;
  margin-left:5px;
}

or

s += '&nbsp;<img alt="PLAY" ...

Btw.: The correct way would be, to create the <td> and <img> elements via document.createElement and then attach them to the dom. (Or use jquery, it's a bit simpler there)

Upvotes: 2

taz
taz

Reputation: 1526

If "space" means visually rendered space to the left of the rendered button element, this would typically be done with CSS. A common implementation would be that the image tag itself, or a container of the image tag, has a CSS class attribute that assigns space appropriately. For the CSS to do this, look into things like padding, margins, absolute vs relative positioning, the left or right attributes, etc.

Upvotes: 0

Mike
Mike

Reputation: 781

s += '&nbsp;<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; cursor:hand" onclick="HandleAction(\'playnow\')">';

OR, more correctly,

s += '&nbsp;<img alt="PLAY" src="' + imageDir + 'radio-play.gif" width="72" border="0" padding="5" height="61" style="cursor:pointer; margin-left:5px;" onclick="HandleAction(\'playnow\')">';

Upvotes: 0

sachleen
sachleen

Reputation: 31131

You can literally put a space character infront of it. I would do it using CSS. Give the image a class class="whatever" and then in CSS:

.whatever {
    margin-left: 10px;
}

Since you're doing it inline already, you could just add the margin in the inline css.

Upvotes: 1

Related Questions