By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,563 Members | 1,058 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,563 IT Pros & Developers. It's quick & easy.

HTML, CSS, and Javascript problem

crystal2005
P: 44
Hi all, I'm currenty creating a website. I got one confusing problem related to CSS and JavaScript actually, not really html.
The problem is, I actually want my welcome screen page is to be random image (1 out of 3 images will be randomly chosen by the javascript code)
Expand|Select|Wrap|Line Numbers
  1. <script language=JavaScript>
  2.     images = new Array(3);
  3.  
  4.     images[0] = "<img border='0' src='Images/EmmaWatson1.jpg' width='800' height='500'>";
  5.  
  6.     images[1] = "<img border='0' src='Images/EmmaWatson2.jpg' width='800' height='500'>";
  7.  
  8.     images[2] = "<img border='0' src='Images/EmmaWatson3.jpg' width='800' height='500'>";
  9.  
  10.     index = Math.floor(Math.random() * images.length);
  11.  
  12.     document.write(images[index]);
  13. </script>
  14.  
And i decided to add a layer (rollover image button) onto the image, but this method didn't seem to work properly in high resolution monitor.
www.heaventure.com/emmawatson
Try to restore down the page and you will see.

My first question is, Is there ayway to fix the layer (<div>) without using the percentage or absolute position? so that the layer can be seen properly to high resolution monitor.

After struggling with that problem, i decided to slice the image into three part and put them into a table. I am using CSS "background-image" to put each and every slice to the table. And it worked properly without having problem of monitor resolution. However, It works only one image. I still want to use 3 random images on my welcome screen. Please have a look the following code

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. .leftside-top-bgimage{
  3.   background-image: url(images_only/EmmaWatson1_01.jpg);
  4. }
  5. .leftside-bottom-bgimage{
  6.   background-image: url(images_only/EmmaWatson1_03.jpg);
  7. }
  8. .rightside-bgimage{
  9.   background-image: url(images_only/EmmaWatson1_02.jpg);
  10. }
  11. </style>
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
  3.   <tr>
  4.     <td width="245" height="180" valign="bottom" align="right" class="leftside-top-bgimage">
  5.         <!-- Layer for rollover image is here-->
  6.     </td>
  7.     <td width="555" height="500" rowspan="2" class="rightside-bgimage">
  8.  
  9.     </td>
  10.   </tr>
  11.   <tr>
  12.     <td width="245" height="320" class="leftside-bottom-bgimage">
  13.  
  14.     </td>
  15.   </tr>
  16. </table>
  17. </body>
  18.  
My second question is, How to combine my Javascript random image code with the CSS? And how to embed it into the HTML? Note, I have 3 slice images for each welcome screen (3 images for welcome screen)
Jul 15 '07 #1
Share this Question
Share on Google+
7 Replies


drhowarddrfine
Expert 5K+
P: 7,435
For the html/css, here are the corrections that must be made:

1) You don't have a doctype. Without one, you are in 'quirks mode' which is not "a good thing". See the article about doctypes in the html/css Articles section above. Use "strict".
2) Your charset should be utf-8.
3) It's <script type="text/javascript">
4) align="center" was deprecated years ago, as was <center>. Both are invalid in html.
5) You are using a Xhtml end tag - /> - but haven't declared xhtml. Remove the slash.
6) There is no such thing as a layer in html/css. Call a div a div or you'll create confusion.
7) When you decided to slice your images and use a table, you may have made this go from an easy solution to a difficult one. Never use tables for layout.

Now that I've gone through the obvious problems, and the morning fog is lifting, I'll see if I need to transfer this to the javascript forum.
Jul 15 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
Validate your html and css for other errors after you fix those above. This appears to be a mostly javascript question so I'm sending this over there.
Jul 15 '07 #3

acoder
Expert Mod 15k+
P: 16,027
Your Javascript for the random images seems fine. What do you want to appear on rollover?
Jul 17 '07 #4

crystal2005
P: 44
I got some more questions,
What is the different between <script type="text/javascript"> and <script language="javascript">?

Based on what moderator drhowarddrfine has said, "Never use tables for layout", then what am i suppose to use for layout instead?
Jul 17 '07 #5

acoder
Expert Mod 15k+
P: 16,027
I got some more questions,
What is the different between <script type="text/javascript"> and <script language="javascript">?
The language attribute was deprecated years ago. You should set the type instead.
Based on what moderator drhowarddrfine has said, "Never use tables for layout", then what am i suppose to use for layout instead?
You should use CSS instead. Tables are supposed to be for data, not for layout.
Jul 17 '07 #6

crystal2005
P: 44
Thanks for all the helps guys....
Jul 18 '07 #7

acoder
Expert Mod 15k+
P: 16,027
Thanks for all the helps guys....
You're welcome. If you have any more problems, feel free to post again.
Jul 18 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.