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) -
<script language=JavaScript>
-
images = new Array(3);
-
-
images[0] = "<img border='0' src='Images/EmmaWatson1.jpg' width='800' height='500'>";
-
-
images[1] = "<img border='0' src='Images/EmmaWatson2.jpg' width='800' height='500'>";
-
-
images[2] = "<img border='0' src='Images/EmmaWatson3.jpg' width='800' height='500'>";
-
-
index = Math.floor(Math.random() * images.length);
-
-
document.write(images[index]);
-
</script>
-
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 -
<style type="text/css">
-
.leftside-top-bgimage{
-
background-image: url(images_only/EmmaWatson1_01.jpg);
-
}
-
.leftside-bottom-bgimage{
-
background-image: url(images_only/EmmaWatson1_03.jpg);
-
}
-
.rightside-bgimage{
-
background-image: url(images_only/EmmaWatson1_02.jpg);
-
}
-
</style>
- <body>
-
<table width="800" align="center" border="0" cellpadding="0" cellspacing="0">
-
<tr>
-
<td width="245" height="180" valign="bottom" align="right" class="leftside-top-bgimage">
-
<!-- Layer for rollover image is here-->
-
</td>
-
<td width="555" height="500" rowspan="2" class="rightside-bgimage">
-
-
</td>
-
</tr>
-
<tr>
-
<td width="245" height="320" class="leftside-bottom-bgimage">
-
-
</td>
-
</tr>
-
</table>
-
</body>
-
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) 7  1785 
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.
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.
Your Javascript for the random images seems fine. What do you want to appear on rollover?
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?
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.
Thanks for all the helps guys....
Thanks for all the helps guys....
You're welcome. If you have any more problems, feel free to post again.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Gr8DaddyG |
last post by:
I am trying to paste the following code into the HTLM editor of my
webpage:
<script...
|
by: cjm |
last post by:
I have two problems that I suspect will be bread-and-butter problems for the
more experienced guys on here, but I'm not the greatest with js.
NB: Code snippets at the bottom
The first problem...
|
by: MB |
last post by:
Hello everyone!
These lines were inspired by the "DIV without line breaks" posted by
Johnny Two Dogs on June 22.
I know it is an old issue, but I want to share a few remarks that could
be of...
|
by: Brian Kitt |
last post by:
I have a C# application that builds dynamic HTML and renders it. Because it
is rendered in this way, the input controls are not server controls. I write
the entire page, which has a variable...
|
by: Jake Barnes |
last post by:
Using javascript closures to create singletons to ensure the survival
of a reference to an HTML block when removeChild() may remove the last
reference to the block and thus destory the block is...
|
by: Nathan Sokalski |
last post by:
I add several JavaScript events (onchange, onkeypress, etc.) to Controls
using the Add method of the Attributes collection. However, if the
JavaScript code contains certain characters, such as & or...
|
by: Peter Michaux |
last post by:
Hi,
I am experimenting with some of the Ruby on Rails JavaScript generators
and see something I haven't before. Maybe it is worthwhile?
In the page below the script is enclosed in
//<!]>
...
|
by: zac540 |
last post by:
Hey everyone!
First of all I'd like to say that I did my best to look for any other relevant posts. The best I found was this interesting thread.. http://bytes.com/forum/thread594982.html
If...
|
by: MartinRinehart |
last post by:
I can load a dialog by loading an HTML page or by constructing the
dialog with JavaScript.
What should I be thinking about when I look at this choice?
|
by: happyse27 |
last post by:
Hi All,
The html page(see item a below) is calling javascript(item b below), but cant work as the page show blank. Not sure if the method of calling is wrong(in terms of default directory) or...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
| | |
