Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Complicated Problem..! 3

Status
Not open for further replies.
gasper000

gasper000

Programmer
Nov 25, 2008
13
EG
Well, I have a javascript problem which I find really complicated. I'm not an expert, I'm just a beginner. I worked hard trying to do something special but faced the following problem:

I have [IMAGE A] [IMAGE B] [IMAGE C]

&

[IMAGE 1] [IMAGE 2] [IMAGE 3] [IMAGE 4] [IMAGE 5] [IMAGE 6] [IMAGE 7] [IMAGE 8] [IMAGE 9]



When the user clicks on [IMAGE A] -> [IMAGE 1] [IMAGE 2] [IMAGE 3] appear

when the user clicks on [IMAGE B] -> [IMAGE 4] [IMAGE 5] [IMAGE 6]
appear, replacing [IMAGE 1] [IMAGE 2] [IMAGE 3]

when the user clicks on [IMAGE C] -> [IMAGE 4] [IMAGE 5] [IMAGE 6]
appear, replacing [IMAGE 4] [IMAGE 5] [IMAGE 6]

AND VICE VERSA..!

I have developed some functions to do so. I have also developed some other functions so when the user clicks on [IMAGE 1], [IMAGE 2], [IMAGE 3], [IMAGE 4], [IMAGE 5], [IMAGE 6], [IMAGE 7], [IMAGE 8], or [IMAGE 9], he gets onMouseOver, onMouseOut, & onClick events.

THE PROBLEM IS:

when the user clicks on [IMAGE 1], [IMAGE 2], or [IMAGE 3], the events work fine for only these 3 images but they generate some errors regarding the replacement issue. Also they only work for [IMAGE 1], [IMAGE 2], & [IMAGE 3] but not for the other images. I guess I know the reason which is images [IMAGE 1], [IMAGE 4], & [IMAGE 7] have the same position, [IMAGE 2], [IMAGE 5], & [IMAGE 8] have the same position, & [IMAGE 3], [IMAGE 6], & [IMAGE 9] have the same position.

I know it's complicated but anyway, I have figured 3 ideas that may help
1. Edit The Original Functions (very hard to do, they are 1000+ lines & hard to trace).

2. Switch between onClick Events like onClick="stay('image6') or changeimagexetra() " I dunno how to do that thing or even if it's possible to do.

3. Use Switch statement but I'm not familiar with it & most of the examples online are not that useful.


That's the problem I'm facing...Let me know your opinion.
 
Sort by date Sort by votes
Hi

Maybe I misunderstand you, but I would do it with 6 [tt]image[/tt] elements : 3 clickable and 3 to display the 9 images.
Code: 
<html>
<head>
<script type="text/javascript">
var show={
  'imagea':{'image1':'one.png','image2':'two.png','image3':'three.png'},
  'imageb':{'image1':'four.png','image2':'five.png','image3':'six.png'},
  'imagec':{'image1':'seven.png','image2':'eight.png','image3':'nine.png'}
}
function ch(what)
{
  for (one in show[what.id])
    document.getElementById(one).src=show[what.id][one]
}
</script>
</head>
<body>
<img id="imagea" onclick="ch(this)">
<img id="imageb" onclick="ch(this)">
<img id="imagec" onclick="ch(this)">
<hr>
<img id="image1">
<img id="image2">
<img id="image3">
</body>
</html>

Feherke.
 
Upvote 0 Downvote
May be I was not clear enough but what you wrote is what exactly I have reached. I got the same effect using different codes but actually that's not the problem. I will explain it on your example so it can be much easier. What I want to do is to apply onClick, onMouseOver, & onMouseOut events on images 1-9.

User Clicks on image a -> images 1, 2, & 3 appear -> user moves the mouse over image1 it gives him onMouseOver effect, & same for onClick, & onMouseOut effects ->then user click on imageb ->images 4 5 & 6 replace images 1 2 3 -> user moves the mouse over image4 5 or 6, it gives him onMouseOver, onClick, & onMouseOut effects & so on.
 
Upvote 0 Downvote
Hi

Got it. Then a small modification :
Code: 
<html>
<head>
<script type="text/javascript">
var show={
  'imagea':{'image1':'one.png','image2':'two.png','image3':'three.png'},
  'imageb':{'image1':'four.png','image2':'five.png','image3':'six.png'},
  'imagec':{'image1':'seven.png','image2':'eight.png','image3':'nine.png'}
}
var set='imagea'
function ch(what)
{
  for (one in show[what.id])
    document.getElementById(one).src=show[what.id][one]
  set=what.id
}
function sw(what,how)
{
  alert(this.src=show[set][what.id].replace(/\./,(how?'over':'')+'.'))
}
</script>
</head>
<body>
<img id="imagea" onclick="ch(this)">
<img id="imageb" onclick="ch(this)">
<img id="imagec" onclick="ch(this)">
<hr>
<img id="image1" onmouseover="sw(this,1)" onmouseout="sw(this,0)">
<img id="image2" onmouseover="sw(this,1)" onmouseout="sw(this,0)">
<img id="image3" onmouseover="sw(this,1)" onmouseout="sw(this,0)">
</body>
</html>
Here I supposed that the rollover images have the same name with 'over' appended : one.png / oneover.png .

Feherke.
 
Upvote 0 Downvote
WoW..! Thanks a lot ..your work is much appreciated..! :)
I thought I was doing good with javascript, but it seems like I'm few steps away from being a beginner..! lol

Just 2 more questions.
1st. how can I replace the alert with another image replacement. Like replace two.png with image twenty.png & image eight.png with eighty.png..etc.

2nd. where can I find advanced tutorials about javascript, Ajax & other web designing languages. I want very advanced tutorials with examples that may help me to be an expert.
 
Upvote 0 Downvote
Hi

Then let us modify abit the data to include both image names : first the normal ( index 0 ), then the rollover ( index 1 ).
Code: 
<html>
<head>
<script type="text/javascript">
var show={
  'imagea':{'image1':['one.png','ten.png'],'image2':['two.png','twenty.png'],'image3':['three.png','thrity.png']},
  'imageb':{'image1':['four.png','fourty.png'],'image2':['five.png','fifty.png'],'image3':['six.png','sixty.png']},
  'imagec':{'image1':['seven.png','seventy.png'],'image2':['eight.png','eighty.png'],'image3':['nine.png','ninety.png']}
}
var set='imagea'
function ch(what)
{
  for (one in show[what.id])
    document.getElementById(one).src=show[what.id][one][0]
  set=what.id
}
function sw(what,how)
{
  this.src=show[set][what.id][how]
}
</script>
</head>
<body>
<img id="imagea" onclick="ch(this)">
<img id="imageb" onclick="ch(this)">
<img id="imagec" onclick="ch(this)">
<hr>
<img id="image1" onmouseover="sw(this,1)" onmouseout="sw(this,0)">
<img id="image2" onmouseover="sw(this,1)" onmouseout="sw(this,0)">
<img id="image3" onmouseover="sw(this,1)" onmouseout="sw(this,0)">
</body>
</html>
Regarding tutorials, I have no idea. Try the FAQ section of this forum, certainly there are some good links too.

Feherke.
 
Upvote 0 Downvote
I tried it but it doesn't seem to work this time. The onmouseover, onmouseout doesn't have any effect on the images.
 
Upvote 0 Downvote
I didn't notice the star thing. I voted twice for him.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

amrmnabil
  • Locked
  • Question
React Problem
Replies
0
Views
139
amrmnabil
amrmnabil
bs6600
  • Locked
  • Question
Nested accordion problem
Replies
1
Views
95
bs6600
bs6600
Disskyz
  • Locked
  • Question
New to JavaScript, Having a problem with an array
Replies
2
Views
141
Disskyz
Disskyz
bs6600
  • Locked
  • Question
Accordion - Anchors in panels causing problems 1
Replies
6
Views
140
feherke
feherke
Michael Davis
  • Locked
  • Question
Robert.Husted Calendar Script Problem?
Replies
2
Views
88
Michael Davis
Michael Davis

Part and Inventory Search

Sponsor

Back
Top