2 x Mouseover

  • Y2k88
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 04, 2004
  • Posts: 21
  • Status: Offline

Post June 4th, 2004, 2:50 am

Finally found where I belong...

Short Intro
A newb trying to make better websites with practice
Starting to learn Javascript and CSS
and Can okaylish modify certain HTML, Java code

So yeh, I've got a problem I don't know how to solve:
Imagine this:

You have a text hyperlink
Below it, are 2 images, Image A and Image B

the Problem
When I Mouseover the Text Hyperlink, how can I get Image A to change into Image C, Image A to change into Image D

As you see, i mite not be very good at explaining stuff, but hope you guys (geniuses) you could my problem.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post June 4th, 2004, 2:50 am

  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post June 4th, 2004, 2:58 am

Y2k88 wrote:
When I Mouseover the Text Hyperlink, how can I get Image A to change into Image C, Image A to change into Image D


image a - > c
image b - > d

Well from the title of the topic, I am assuming that you ca do one, or the other but not both. Assuming that you know how to do the image rollovers already:

Code: [ Select ]
onmouseover="imageRolloverCodeA;imageRolloverCodeB;"


Just put both lines of code in the onmouseover, separated by a semicolon. Semicolon tells browser it is a new line and and new instruction.

If you don't know how to do single rollovers, then reply and I will explain.
CSS website design tutorials
  • Y2k88
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 04, 2004
  • Posts: 21
  • Status: Offline

Post June 4th, 2004, 4:32 am

Thanx,

but I've tried that already, exactly, before i came here for help

But couldn't get it to work

A lil description on what it would do:
When i mouseover the text hyperlink, image A would change to image C, Image B would change to image D

But when i mouseout, only image D would change back to image A, image C stays as image C

So yeh, I was like, eh?

And does anyone know how to do an onclick image slideshow,
so that when u click like a button, image A changes to image B
if u click it again, image B changes to image C
and if u click it again, image C changes back to image A

Cheers
  • Y2k88
  • Novice
  • Novice
  • No Avatar
  • Joined: Jun 04, 2004
  • Posts: 21
  • Status: Offline

Post June 4th, 2004, 4:36 am

Here is what I had

Did I do anything wrong?

onMouseOver="MM_swapImage('LeftSpacer','','images/daiwa1.gif',1);MM_swapImage('RightSpacer','','images/daiwa2.gif',1)"
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post June 4th, 2004, 4:41 am

Can you post the code you used or a link to an eg? That should work. What errors does it throw?

The slidesow I would do an array:
Code: [ Select ]
var imagePaths=array(
  "images/path/file.jpg",
  "images/path/file2.jpg",
  "images/path/file3.jpg"
)
currentImage=0;

function doSlideChange(){
  currentImage++;
  if (currentImage>Imagepaths.length){
    currentImage=0;
  }
  [ImageID].src=imagePaths[currentImage];
}
  1. var imagePaths=array(
  2.   "images/path/file.jpg",
  3.   "images/path/file2.jpg",
  4.   "images/path/file3.jpg"
  5. )
  6. currentImage=0;
  7. function doSlideChange(){
  8.   currentImage++;
  9.   if (currentImage>Imagepaths.length){
  10.     currentImage=0;
  11.   }
  12.   [ImageID].src=imagePaths[currentImage];
  13. }


Thats just off the top of my head so there may be better ways of doing it, and it may have some bugs.
CSS website design tutorials
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post June 4th, 2004, 4:44 am

Can't say that I have ever seen MM_swapImage before :?
CSS website design tutorials
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post June 4th, 2004, 9:29 am

MM_swapImage is one of those macromedia functions that comes with dreamweaver and is designed specifically for a rollover menu. Trying to modify it for a slideshow would be less trouble that creating one from scratch I think. The one rtm came up with off the top of his head works for me with a few trivial changes.

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
var imagePaths = Array(
  "images/file1.gif",
  "images/file2.gif",
  "images/file3.gif"
)
currentImage=0;

function doSlideChange(){
  currentImage++;
  if (currentImage>=imagePaths.length){
    currentImage=0;
  }
  document.images['imgHolder'].src=imagePaths[currentImage];
}
// -->
</script>
</head>
<body>
<a href="#" onclick="doSlideChange()">Change</a>
<br><br>
<img name="imgHolder" height="32" width="32" src="images/file1.gif" alt="">
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. var imagePaths = Array(
  7.   "images/file1.gif",
  8.   "images/file2.gif",
  9.   "images/file3.gif"
  10. )
  11. currentImage=0;
  12. function doSlideChange(){
  13.   currentImage++;
  14.   if (currentImage>=imagePaths.length){
  15.     currentImage=0;
  16.   }
  17.   document.images['imgHolder'].src=imagePaths[currentImage];
  18. }
  19. // -->
  20. </script>
  21. </head>
  22. <body>
  23. <a href="#" onclick="doSlideChange()">Change</a>
  24. <br><br>
  25. <img name="imgHolder" height="32" width="32" src="images/file1.gif" alt="">
  26. </body>
  27. </html>
Free Programming Resources
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post June 4th, 2004, 9:50 am

I just realized there are two separate questions in this thread. :oops:

The MM_swapImage is matched with a MM_swapImgRestore() - at least I think that's the name of it anyway (something like that). If I remember correctly, when you swap an image the data for the swap is recorded in an array and when restore is called onmouseout the last swap is just undone, so if you use MM_swapImage twice in a row, only the last swap will be undone when restore is called. I'm going out on a limb here as I haven't used these functions in a long time, but I'm pretty sure that's why a double rollover won't undo properly.

I'm assuming you're using the restore function in the onmouseout. If that's the case maybe you could try using the swap function for both mouseover and mouseout and explicitly change them both, because I think the restore function will only change the second one.
Free Programming Resources
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Mar 24, 2004
  • Posts: 1855
  • Loc: Uk
  • Status: Offline

Post June 4th, 2004, 10:21 am

How about not using the propriatory Macromedia functions :) I'd just do the

.src="images/file1.gif"

It's less extensible but it should save a lot of hassle IMHO

of course you could just do it with CSS.....
CSS website design tutorials
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post June 4th, 2004, 10:50 am

Well, if he's using Dreamweaver, as I assume he is since MM functions are there, then I don't think they object to using their proprietary code, although I assume that they would object to modifying it. I don't think calling the function from both onmouseout and onmouseover would be tantamount to modifying the code. However, it would probably just be simpler to make your own swap function. Maybe something like:

Code: [ Select ]
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function swap(img,imgFile) {
        document.images[img].src = "images/" + imgFile;
}
// -->
</script>
</head>
<body>
<a href="#"
onmouseover="swap('imgA','file2.gif');swap('imgB','file4.gif')"
onmouseout="swap('imgA','file1.gif');swap('imgB','file3.gif')"
>swap</a><br><br>
<img name="imgA" src="images/file1.gif" height="32" width="32" alt="">
<img name="imgB" src="images/file3.gif" height="32" width="32" alt="">
</body>
</html>
  1. <html>
  2. <head>
  3. <title>Untitled</title>
  4. <script type="text/javascript">
  5. <!--
  6. function swap(img,imgFile) {
  7.         document.images[img].src = "images/" + imgFile;
  8. }
  9. // -->
  10. </script>
  11. </head>
  12. <body>
  13. <a href="#"
  14. onmouseover="swap('imgA','file2.gif');swap('imgB','file4.gif')"
  15. onmouseout="swap('imgA','file1.gif');swap('imgB','file3.gif')"
  16. >swap</a><br><br>
  17. <img name="imgA" src="images/file1.gif" height="32" width="32" alt="">
  18. <img name="imgB" src="images/file3.gif" height="32" width="32" alt="">
  19. </body>
  20. </html>
Free Programming Resources

Post Information

  • Total Posts in this topic: 10 posts
  • Users browsing this forum: No registered users and 84 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.