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  1803 
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.
acoder 16,027
Recognized Expert Moderator MVP
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="javas cript">?
Based on what moderator drhowarddrfine has said, "Never use tables for layout", then what am i suppose to use for layout instead?
acoder 16,027
Recognized Expert Moderator MVP
I got some more questions,
What is the different between <script type="text/javascript"> and <script language="javas cript">?
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....
acoder 16,027
Recognized Expert Moderator MVP
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 src='http://voap.weather.com/weather/oap/USFM0004?template=EVNTV&par=1004845350&unit=0&key=470c828c1eed4306eeef1f0c11d4bf45'></script>
But, it will not display correctly. Here's exactly what it displays:
src='http://voap.weather.com/weather/oap/USFM0004?template=EVNTV&par=1004845350&unit=0&key=470c828c1eed4306eeef1f0c11d4bf45'></script>
It's...
|
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 is that after a bit of fiddling I'm getting am 'Object
Expected' error when I click on the Depot dropdown which I can't seem to get
round. The code I had was working OK but then I cut it all out, tidied it
all up, and put it back in and now it...
|
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 interest for many members of this group.
A brief summary is given below. However, you may want to take a look
back at the original posting before continuing.
|
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 number of detail lines for an order. I
want the user to be able to change values on these detail lines and hit an
'update' button. I know how to do this in Javascript, but I'd like to be
able to inspect the controls that come back to my C# program...
|
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 what I'm hoping to
achieve.
I've never before had to use Javascript closures, but now I do, so I'm
making an effort to understand them. I've been giving this essay a
re-read:
http://jibbering.com/faq/faq_notes/closures.html
| | |
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 < or several
others, it converts them to html, such as & or < which can sometimes
cause my scripts not to work. How can I prevent ASP.NET from doing this?
Thanks.
--
Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/
|
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
//<!]>
Is this trick grounded in any real information about HTML vs XHTML? I
|
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 it answered my question I am just to stupid to realize it I would like to apologize in advance. This is my very first attempt at using Javascript so any help at all is greatly appreciated. I read the W3Schools Tutorial on Javascript so that and some...
|
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 javascript is wrong.
using 127.0.0.1/htmlscript.html below to call the java script embedded in the following html script.
I am using apache server and apache server have error 304(not modified)
Been trying many methods for past 1...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| | |
