The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Javascript in HTML
htmlbeg
post Apr 16 2012, 08:09 PM
Post #1


Newbie
*

Group: Members
Posts: 14
Joined: 28-February 12
Member No.: 16,597



Hi,
I am using javascript to randomize the 9 images in html to appear differently each time the page is loaded!
I am so not sure where to begin and would appreciate any starters advice or help!

I know i need variables, but how do I make the 9 images to appear randomly each time..

Thanks for all your help

The code is below. As you can tell I have only introduced java as the script, I dont know what to do next. I think I need to use Math random or something...


CODE


<title>Shady Plants</title>
</head>
<h1>
<span style="color:#f50">Shady</span>
<span style="color:#ff0">Plants</span>
</h1>

<body>
    <section>
        <article>
            <p>Have you ever wondered why your plants just die when you do all the right things? It may be because your plants dont require too much sunlight
            (or the other way around). Shady plants are good for small gardens, and cramped places where the sun doesnt reach all the way. However, you can still
            grow beautiful plants like the ones below. It really just depends on your taste as to what you would like to grow. If you have a green thumb, you can
            try your hand at exotic flowers such as bleeding hearts, wild ginger, and fairy wings. Or, if you prefer regular shaped normal flowers, you can try
            Forget-Me-Nots, trillium, and creeping buttercups. If you like big and wide spreading flowers, you can plant brazilian plume, and blue buggleweed. And,
            if your looking to be inspired, try the beautiful Tiger Monkey flower. Good Look Flowering! Also, try to guess which name belongs to which flower,
            they are all pretty easy to unravel. </p>
        </article>
        <article>
        <div id="pictures">

        <img src="1.jpg" alt="flower" width="304" height="228" />
        <img src="2.jpg" alt="Pulpit rock" width="304" height="228" />
        <img src="3.jpg" alt="Pulpit rock" width="304" height="228" />
        <img src="4.jpg" alt="Pulpit rock" width="304" height="228" />
        <img src="5.jpg" alt="Pulpit rock" width="304" height="228" />
        <img src="6.jpg" alt="Pulpit rock" width="304" height="228" />
        <img src="7.jpg" alt="Pulpit rock" width="304" height="228" />
        <img src="8.jpg" alt="Pulpit rock" width="304" height="228" />
        <img src="9.jpg" alt="Pulpit rock" width="304" height="228" />
        <script type="text/javascript">
            
        </script>
        </div>
        </article>
    </section>
    <footer>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 17 2012, 06:26 AM
Post #2


.
********

Group: WDG Moderators
Posts: 6,133
Joined: 10-August 06
Member No.: 7



QUOTE(htmlbeg @ Apr 17 2012, 03:09 AM) *

Hi,
I am using javascript to randomize the 9 images in html to appear differently each time the page is loaded!

Then I move the thread to the JS forum.

Do you mean you want to shuffle the order of the images (with all of them visible), or do you want just one image visible at the time? Googling image random javascript should turn up lots of versions of at least the latter.

You can also use server-side script (e.g. PHP) for this.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
htmlbeg
post Apr 17 2012, 09:21 AM
Post #3


Newbie
*

Group: Members
Posts: 14
Joined: 28-February 12
Member No.: 16,597



I want to shuffle the order of the images each time.

I have to use java..its a requirement.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 17 2012, 10:06 AM
Post #4


.
********

Group: WDG Moderators
Posts: 6,133
Joined: 10-August 06
Member No.: 7



Maybe this one can be used: http://www.javascriptkit.com/javatutors/randomorder.shtml

Unfortunately no images will be visible to users without JS.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Apr 17 2012, 12:18 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,017
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



And for the record, JavaScript and Java are completely different languages.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st October 2014 - 10:10 PM