Javascript Puzzle Image Swap

5 New Member

Hi All! I'm new to javascript and need a little help with a simple puzzle im trying to design. I have a 600x100 pixel picture that I have sliced into 6 100x100 rectangles making a table of of 6 columns and 1 row. I wanted to make a "swap puzzle" where the user clicks on one image then the other and they swap. At first load i want to have the puzzle in a scrambled order and then when they complete it I want to alert the user with how many clicks it took them to solve. So bascially Im having trouble with figuring out how to start out with a scrambled order and how to swap the images. Sorry if its a dumb question im very new to javascript and programming itself... Thanks!!

Nov 10 '08 #1

Subscribe Reply

4811

acoder

16,027

Recognized Expert Moderator MVP

What have you managed so far?

Nov 10 '08 #2

dmf1207

New Member

Expand|Select|Wrap|Line Numbers

 <HTML>

<HEAD>

<SCRIPT LANGUAGE=JavaScript>

function swapImage() {

switch (intImage) {

   IMG1.src = "puzzle1.gif"

   intImage = 2

   return(false);

   IMG1.src = "puzzle2.gif"

   intImage = 1

   return(false);

   IMG1.src = "puzzle3.gif"

   intImage = 3

   return(false);

   IMG1.src = "puzzle4.gif"

   intImage = 4

   return(false);

   IMG1.src = "puzzle5.gif"

   intImage = 5

   return(false);

   IMG1.src = "puzzle5.gif"

   intImage = 6

   return(false);

 }

}

</SCRIPT>

</HEAD>

<BODY>

 onclick="swapImage();">

</BODY>

</HTML>

This is all I have so far. I know its not correct I've just been trying to play around with the code adding and deleting things here and there to try to get it to work correctly. Sorry if this is a stupid question i'm just starting out with programming.

Nov 10 '08 #3

acoder

16,027

Recognized Expert Moderator MVP

To scramble images, you'll need some randomisation. For that, use Math.random(). You need the six images in the HTML. You also need to access them using their IDs or document.images[]. You can swap images using the image src property. You'll also need to keep a count of the number of clicks in a variable.

Nov 10 '08 #4

dmf1207

New Member

could you provide an example code. I am really confused now.....

To scramble images, you'll need some randomisation. For that, use Math.random(). You need the six images in the HTML. You also need to access them using their IDs or document.images[]. You can swap images using the image src property. You'll also need to keep a count of the number of clicks in a variable.

Nov 11 '08 #5

acoder

16,027

Recognized Expert Moderator MVP

What I would suggest you do first of all is read a good introductory tutorial with examples. This is a good one to get you started.

If you look at my last post, there's a number of things that you need to do. The first thing (after putting the img tags in the HTML) is the randomisation.

Nov 11 '08 #6

Similar topics

2251

javascript mouseover

by: John J | last post by:

Hi there I have the following code on a site that works as it should but I'd like to understand how it works (a luxury I realise :). I use it to change the colour of buttons on a menu when a...

Javascript

1961

Seeking javascript image displayer

by: Cynthia | last post by:

I'm looking for javascript code that when I mouse over a menu item will display a picture elsewhere on the page. I know it exists, but the ones I've found so far just swap out the menu item in...

Javascript

4465

Javascript Image Swap

by: broms10 | last post by:

I need help. I have a little button that says "next" below a big image, let´s call it "image1", when I press the button I want to swap the big image to "image2". And then if I press it again I...

Javascript

1294

Javascript for Custom web control

by: No One | last post by:

I have a custom webcontrol that displays a menu bar consisting of a table with images. Each image as a link. The parts are made of Web controls, not straight html. I need to write a Javascript...

ASP.NET

3171

swap image and link change help (javascript)

by: Karl | last post by:

Hi, Ok so on a given page I have 4 text links: see it in black see it in blue see it in red see it in green using the standard swap image behavior, clicking on one of the above links

Javascript

6666

Javascript Style Properties for Dynamic Images in Safari

by: Joe Cox | last post by:

I am having a problem with style properties for dynamic images in Mac OS X Safari. By dymanic images, I mean images allocated with the javascript 'new Image()' call. With static images (created...

Javascript

2553

Firefox not recognising javascript spaces between text

by: tim | last post by:

I am using foldoutmenu 3 and am having problems with viewing my menus in firefox. On my sub3 menus i have more than one line of text in some places. firefox does not recognise that there is more...

Javascript

2771

include a javascript disable the function of another

by: pythoNewbie | last post by:

Hi guys I have 2 javascript functions, First I include which does swap images whenever I pass the mouse over a certain image <script language="JavaScript" type="text/JavaScript"...

Javascript

19747

15 puzzle

by: honey777 | last post by:

Problem: 15 Puzzle This is a common puzzle with a 4x4 playing space with 15 tiles, numbered 1 through 15. One "spot" is always left blank. Here is an example of the puzzle: The goal is to...

C / C++

7033

What is ONU?

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,...

General

7027

Problem With Comparison Operator <=> in G++

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,...

C / C++

7071

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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...

Online Marketing

6726

The easy way to turn off automatic updates for Windows 10/11

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...

Windows Server

5318

AI Job Threat for Devs

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,...

Career Advice

4763

Access Europe - Using VBA to create a class based on a table - Wed 1 May

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...

Microsoft Access / VBA

4468

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

557

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

170

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

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...

General