15 Year Old JavaScript! Decoding Dreamweaver's MM_swapImage()

Haha. Loved this video. Thumbs up.

Great ! Thumbs up for it ;)

wow random alert,well hello)

True story: in 2001 I did an internship in a famous web agency in my country. They gave me some Javascript to customize. Since it was full of MM, I obviously spotted that it was created with Dreamweaver. In an agency with over 100 employees, this is not what I expected, and I reported it to my supervisor.
Then they gave me some other code, the same but with the MM removed. Needless to say, I was far from enthusiast...
And the code was far worse than what we saw here.

I love that the file is called wtf.js - I wonder if MM really stands for Marc Maron? 😄

Does this mean we're getting a vanilla JS course in the near future? 😮

I remember those...

Pretty cool digging..

That was interesting. I do remember Dreamweaver having all sorts of "black magic" back then. It is nice to see it was just some javascript behind the curtain

What a throwback! Thanks for diving into this, that was a fun trip down memory lane.

Cool. I know I find it easier to reverse engineer ugly/minified code when I use find+replace(in selection) to change the variable names from single letters where possible.

was this code generated by dreamweaver?

It's crazy to think that you can eliminate all that javascript and just make some styled <a> tags.

Man Whatcha Doin!

True definition of HellCode.js Oh man i wonder how they felt when they code this :(

I suspect that the looping in MM_SwapImage is so that you can change multiple images at a time, so you can hover over one image, and 5 could change. I seem to recall there was a time when you'd slice up your images, so not all would be the one being hovered over That's probably also why that global array is an array because it undoes the toggle on everything in that array. I suspect there's a ton of edge cases where this breaks (but hey, just reload the browser, and you'll be fine!) ;) .

Haha that’s awesome.

But is it not strange that they’re using PNGs? That would mean they would have updated the site to use PNGs while keeping that relic script...? Because I seem to recall this script predating the time when PNGs became commonplace. Unless they were using one of those scripts to add PNG transparency to old IE... yet another relic!

I just ran into something that used this about month ago. The wildest thing is the code using it was written this year. Some people cannot let old things die.

Are you drunk? First adds a comment "blank array" over document.MM_sr, 10 seconds later wonders what document.MM_sr is and can it be an array :O

Dreamweaver was tha bomb! I remember they also have this proprietary templating system with repeating regions etc, to minimize code duplication. But then it all goes down the drain when i found out about PHP includes.

I am waiting for the javascript visualization course

Contrary to comments, that JS really doesn't even look bad—especially when compared to something like a Webpack bundle. Like... you can reverse engineer those 50 lines but that same functionality in a React/Webpack app would be several thousand npm dependencies.

I feel so shitty that I skipped over vanilla DOM JS (mostly went straight from jQuery to React). It seems interesting and fun.

Dear Wes Bos, you have been a great mentor and guide and have shaped my career well. I thank you for your efforts. Happy Teachers Day…

What theme for the editor?

Even better would be if you demonstrate how you would do it today - sure, you can do it by using a link or div and :hover selector, but it will flicker when the hover is triggered first time, so a preload would be nice - at least for FF and Safari. Another way is to use CSS sprites, that would avoid the flicker.
If you throw the images away und just use web-fonts styled with hover, you could achieve the design here, but what if you really want to display another image on hover? Shouldn't an image be represented by an img tag (semantic web)?
The JavaScript style is horrendous, no question...

Listen to Syntax every morning, and have almost made my way through everyone! Wes Tolinski boss! Jezz man I thought you were going to be utterly famous! 87k subs, you deserve way more. So here mine!. Also, man you guys make me feel smart. I LOVE the way you talk like normal people, and dont over-complicate the lingo and technicality of concepts. You keep it straight, and btw your (at the time of writing this) Internet setup out at the cottage sounds insane!

Wowowow blast from the past lol! It took me right back as soon as I saw that function name.

Well, the website was surely not coded in 2006 since we got Wiz Khalifa crashing the site and instagram logos up top. THe design also look more moder than that. I'm guessing this is 2011/12

what a great example for JS history

Dreamweaver was a first IDE to many people and everybody started to use visual editor more easier than code editor at the time.

Ha - "wtf.js". Great video!

does anyone know any former macromedia engineer? would be interesting to know what these guys are doing nowadays.

This is where having .quokka would be nice to have lol

BE AWARE: (I think) The browser will handle the caching of each image and not make a new request for the image when the `src` changes via `onmouseover`. BUT if you have your developer tools like Chrome Devtools open and with "Disable cache" checked, then it will make a new request per update to the `src` value via each `onmouseover`.

Maybe obvious but took my a couple hours to figure out :P

Everybody is dumping on this code and I'm literally trying to use it, but I want to manipulate the javascript and specify the full image paths in the javascript code. What I'm trying to figure out is what are you guys using in replace of it since you're laughing at it. I know jquery and haven't used angular and am wondering if there's something quicker I can use. What Im trying to do is add points on a human body and the person should be able to click on each point to identify areas that "hurt" (for massage therapy).. This is the only quick thing I could think of plus add hidden fields so I can store the values they clicked in the database.

I really like looking at old websites for some reason and I've seen this script on a lot of old sites, like Sonic Team's old website for example. I looked it up to see if there's anything online about it, I'm surprised about a video? I thought I was alone looking at these things. I know nothing about javascript and I can't make sense out of what it all meant, thanks for doing the best you could explaining it

Don't really know if this is a good practice to do nowadays, I just want to swap a jpg image to another one without the flicker effect (:hover) without making it a background and having to make it's position "absolute" and manually specifying the width and height and all thattt. I think I'll figure it out eventually