Align, text and images with Javascript Issue.

@BeyJul 20.2008

Greetings, members of the Webdeveloper.com community.
I have been running into a problem with a Javascript and no one has been able to answer me so far, so I hope I will have more luck here. ?

This is the preview of the script I currently have made and works properly.

~~[QUOTE]~~

function Car1(){
var newHTML = “<img src=’Images/Car1.png’></img><H4>This is Testcar 1</H4> The content. “;

document.getElementById(‘content’).innerHTML = newHTML;

}

function Car2(){
var newHTML = “<img src=’Images/Car2.png’></img><H4>This is Testcar 2</H4> The content. “;

document.getElementById(‘content’).innerHTML = newHTML;[/QUOTE]

Now when you use this script, The image comes at the left of the page (As it should) and the text comes right below the image however this is NOT what I want, I want the text to be located at the right of the image.

I have no idea how to align this and what code to use, could someone possibly help me out? or post a good example?

Thanks in advance,
Bey. ?

to post a comment

JavaScript

15 Comments(s) _↴

@cgishackJul 20.2008 — #the <H4> tag is making the new line below the image.

Use [B]CSS [/B]to style your tags to prevent this.

Here is a sample in plain HTML

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;style type="text/css"&gt;
 
 .[B][COLOR="Red"]someClassName [/COLOR][/B]{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 36px;
 }
 
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;img src="http://www.webdeveloper.com/forum/image.php?u=71158&amp;dateline=1199659890" /&gt;
 &lt;span class="[COLOR="Red"][B]someClassName[/B][/COLOR]"&gt;Test&lt;/span&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@BeyauthorJul 20.2008 — #the <H4> tag is making the new line below the image.

Use [B]CSS [/B]to style your tags to prevent this.

Here is a sample in plain HTML

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;style type="text/css"&gt;
 
 .[B][COLOR="Red"]someClassName [/COLOR][/B]{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 36px;
 }
 
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;img src="http://www.webdeveloper.com/forum/image.php?u=71158&amp;dateline=1199659890" /&gt;
 &lt;span class="[COLOR="Red"][B]someClassName[/B][/COLOR]"&gt;Test&lt;/span&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[/QUOTE]

Thanks for the help however, the image is located within the Javascript tags, the Span class can't be added within those tags, So how is it going to work? :p

@cgishackJul 20.2008 — #The span tag can be added.

just escape the quotations.

<i>
 </i>var newHTML = "&lt;img src='Images/Car1.png'&gt;&lt;/img&gt;[B][COLOR="Red"]&lt;span class="someClassName"&gt;[/COLOR][/B]This is Testcar 1 [COLOR="Red"][B]&lt;/span&gt;[/B][/COLOR] The content. ";

@cgishackJul 20.2008 — #also.

get rid of your </img>

close the image tag like so

<img src='Images/Car1.png' [B][COLOR="Red"]/[/COLOR][/B]>

@BeyauthorJul 20.2008 — #Thanks alot! I have used both your advices and it seems to be working, there's only a minor problem left now.

The text doesnt exactly start on the top but it takes the end of the image and starts the content/text.

Here's a example;

Its not how my site looks just did this with Photoshop.

[upl-file uuid=78cc4332-5272-4161-b147-5bdd9a8d5785 size=60kB]Example.png[/upl-file]

@cgishackJul 20.2008 — #you can use an HTML table with 2 cells.

One cell for the image, and a second cell for the text.

The set the text cell vertically align to the top.

Maybe this sample will help you

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 
 
 function Car1()
 {
 var imageURL = "http://www.maniacworld.com/amazing-cars.jpg";
 var text  = "this is car number 1";
 
 <i>	</i>document.getElementById('carImage').src = imageURL;
 <i>	</i>document.getElementById('carText').innerHTML = text;
 }
 
 function Car2()
 {
 var imageURL = "http://vwkombi.com/photos/volkscars/Images/Cars.jpg";
 var text  = "this is car number 2";
 
 <i>	</i>document.getElementById('carImage').src = imageURL;
 <i>	</i>document.getElementById('carText').innerHTML = text;
 }
 
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 .someClassName {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 22px;
 }
 
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;table width="996" border="0"&gt;
 &lt;tr&gt;
 &lt;td width="503"&gt;&lt;img id="carImage" src="http://www.ecosherpa.com/images/dynasty_car.jpg" /&gt;&lt;/td&gt;
 &lt;td width="483" valign="top" id="carText" class="someClassName"&gt; Click on a button to view other cars&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 
 &lt;input type="button" value="View Car1" onclick="Car1()" /&gt;
 &lt;input type="button" value="View Car2" onclick="Car2()" /&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@BeyauthorJul 20.2008 — #you can use an HTML table with 2 cells.

One cell for the image, and a second cell for the text.

The set the text cell vertically align to the top.

Maybe this sample will help you

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 
 
 function Car1()
 {
 var imageURL = "http://www.maniacworld.com/amazing-cars.jpg";
 var text  = "this is car number 1";
 
 <i>	</i>document.getElementById('carImage').src = imageURL;
 <i>	</i>document.getElementById('carText').innerHTML = text;
 }
 
 function Car2()
 {
 var imageURL = "http://vwkombi.com/photos/volkscars/Images/Cars.jpg";
 var text  = "this is car number 2";
 
 <i>	</i>document.getElementById('carImage').src = imageURL;
 <i>	</i>document.getElementById('carText').innerHTML = text;
 }
 
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 .someClassName {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 22px;
 }
 
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;table width="996" border="0"&gt;
 &lt;tr&gt;
 &lt;td width="503"&gt;&lt;img id="carImage" src="http://www.ecosherpa.com/images/dynasty_car.jpg" /&gt;&lt;/td&gt;
 &lt;td width="483" valign="top" id="carText" class="someClassName"&gt; Click on a button to view other cars&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 
 &lt;input type="button" value="View Car1" onclick="Car1()" /&gt;
 &lt;input type="button" value="View Car2" onclick="Car2()" /&gt;
 &lt;/body&gt;
 &lt;/html&gt;

[/QUOTE]

Just amazing! That's even better.

Thanks for your help so far! ?

Hopefully a final question here even though you already helped me out so much, the script you pasted uses links to open the images.

But I want to load everything from a Image folder from my pc, how should the script be? because the following doesn't work.

var imageURL = "<img src='Image/Car1.png' />";[/QUOTE]

- Bey

@cgishackJul 20.2008 — #a better designed script will do it ......

let me see what i can throw together

@cgishackJul 20.2008 — #Do your images have a naming convention you follow ?

example:

car_1.jpg

car_2.jpg

car_3.jpg

?

@BeyauthorJul 20.2008 — #Do your images have a naming convention you follow ?

example:

car_1.jpg

car_2.jpg

car_3.jpg

?[/QUOTE]

No, not really they are all randomly set up on purpose.

I wouldn't name images that way they are eventually going to be called by their real car names. :p

@cgishackJul 20.2008 — #Well try the script below.

Use the Cars[] array to add all your images in.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
 &lt;title&gt;Untitled Document&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 var Cars = new Array();
 
 Cars[1] = ['http://www.maniacworld.com/amazing-cars.jpg', ' Some Text about this Car'];
 Cars[2] = ['http://vwkombi.com/photos/volkscars/Images/Cars.jpg', ' test test test'];
 
 
 function LoadCar(index)
 {
 document.getElementById('carImage').src = Cars[index][0];
 document.getElementById('carText').innerHTML = Cars[index][1];
 }
 
 
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 .someClassName {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 22px;
 }
 
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 &lt;table width="996" border="0"&gt;
 &lt;tr&gt;
 &lt;td width="503"&gt;&lt;img id="carImage" src="http://www.ecosherpa.com/images/dynasty_car.jpg" /&gt;&lt;/td&gt;
 &lt;td width="483" valign="top" id="carText" class="someClassName"&gt; Click on a button to view other cars&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 
 &lt;input type="button" value="View Car1" onclick="LoadCar(1)" /&gt;
 &lt;input type="button" value="View Car2" onclick="LoadCar(2)" /&gt;
 &lt;/body&gt;
 &lt;/html&gt;

if you wanted it to read your DIR on the server you will have to dynamically write the JS using a server side language like PHP or ASP.

@BeyauthorJul 20.2008 — #Did that and it works good, but again a problem with the loading of images.

I don't want to use links as you did in your example :p

Here's what I did with them
Cars[1] = ['<img src="Image/Car1.png" />', ' Some Text about this Car'];

Cars[2] = ['<img src="Image/Car2.png" />', ' test test test'];

Cars[3] = ['<img src="Image/Car3" />', ' content content content'];[/QUOTE]

@Declan1991Jul 20.2008 — #Should be

<i>
 </i>Cars[1] = ['Image/Car1.png', ' Some Text about this Car'];
 Cars[2] = ['Image/Car2.png', ' test test test'];
 Cars[3] = ['Image/Car3', ' content content content'];

If you have a lot of them, doing it like this is easier (basically the same thing, except it uses a variable).

<i>
 </i>var Cars = [], I = 1;
 Cars[I++] = ['http://www.maniacworld.com/amazing-cars.jpg', ' Some Text about this Car'];
 Cars[I++] = ['http://vwkombi.com/photos/volkscars/Images/Cars.jpg', ' test test test'];
 Cars[I++] = //more;
 Cars[I++] = //more;
 Cars[I++] = //more;

@BeyauthorJul 20.2008 — #Should be

<i>
 </i>Cars[1] = ['Image/Car1.png', ' Some Text about this Car'];
 Cars[2] = ['Image/Car2.png', ' test test test'];
 Cars[3] = ['Image/Car3', ' content content content'];

If you have a lot of them, doing it like this is easier (basically the same thing, except it uses a variable).

<i>
 </i>var Cars = [], I = 1;
 Cars[I++] = ['http://www.maniacworld.com/amazing-cars.jpg', ' Some Text about this Car'];
 Cars[I++] = ['http://vwkombi.com/photos/volkscars/Images/Cars.jpg', ' test test test'];
 Cars[I++] = //more;
 Cars[I++] = //more;
 Cars[I++] = //more;

[/QUOTE]

Thanks alot!

Both Declan and cgishack.

I have got it working, I appreciate all the time you spend in making the scripts! ?

@BeyauthorJul 20.2008 — #How would I align the buttons and image by the way?

Also in #JavaScript _↴

JSP/servlet powerpoint getObject() - novice question to retrieve some element within specific table

Success!

Help @Bey spread the word by sharing this article on Twitter...

Tweet This

Align, text and images with Javascript Issue.

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Align, text and images with Javascript Issue.

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴