Member Avatar for paulkaye

I am currently designing a site using Dreamweaver MX:

http://www.conceptwheel.com

The thumbnails on some pages have image swap behaviors assigned.

1. They swap on mouseover to an outlined image
2. They swap on mouseout back to the original
3. They swap on click the central image to a large version of the thumb.

They do this ok when I preview (Dreamweaver F12) but not now they are on the web. Interestingly, they do seem to replace the 'please click' image with nothing instead!!!

I've looked everywhere but I can't find an answer to this one - I hope one of you guys can help?

  • 2 Contributors
  • 5 Replies
  • 177 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by paulkaye
Member Avatar for peter_budo

Hi Paul,
it is nice and easy to develop page in dreamweaver, but you always get in trouble if you do not understand basic principle of HTML, CSS and little of scripting.
Don't worry I not gone bully you over that, will try to help you if possible. Last year I had had similar problem when my teacher rush me with my final work on project and I was forced to use Dreamweaver (still prefer typing me code).
For this purpose I used catalogues.htm from your site. Go to deamweaver and Design view, click on first thumbnail which id is "thumbvgcatalogue2", then go to Code view and you see this.

<A onmouseover="MM_swapImage('thumbmwcatalogue1','','/images/catalogues/thumbnails/thumbmwcatalogue1pink.jpg',1)" 
 onclick="MM_swapImage('blankimage','','/images/catalogues/mwcatalogue1.jpg',1)" 
 onmouseout="MM_swapImage('thumbmwcatalogue1','','/images/catalogues/thumbnails/thumbmwcatalogue1.jpg',1)" 
 href="javascript:;">
<IMG id=thumbmwcatalogue1 height=95 src="" 
            width=100 border=0 name=thumbmwcatalogue1></A>

Have close look at image tag "IMG". Is there anything wrong? Something missing?

You are missing source image for first loading. src="/images/catalogues/thumbnails/thumbvgcatalogue2.jpg"
That should do it for you now. Any more troubles let me know :)

Member Avatar for paulkaye

Hi Peter,

Thanks for your help! I actually had no HTML knowledge before I messed around with dreamweaver so I'm kinda learning backwards! I think a lot of the problems with this site are down to the fact that I initially used a template and then moved the site on my HD. That seems to have created a bunch of HD-specific URLs.

Anyway, regarding what you suggested, I have done it for the catalogues page but am confused as to what you say it will solve. Were you having problems viewing the original thumbnail image? Some people say there is a problem viewing the thumbs until mouseover, some people say there is not. I suppose that what you suggested would solve this problem as the original image url was wrong but after mouseover and mouseout, it would rectify itself. So that may solve that problem.

- Can you let me know if it's viewing correctly in this respect now?

BUT
The other problem (quite a big one!) is that the central image should change when a thumb is clicked. It works on my computer and it works on my sister-in-law's mac but not on her PC!!! Any ideas about that one? Let me outline how I've done all of these 'behaviours'.

Initial state = thumbxxx.jpg
Mouseover => thumbxxxpink.jpg
Mouseout => thumbxxx.jpg
Click = "blankimage" (central 'please click... image) => xxx.jpg

I did it like this as using dreamweaver's 'restore image on mouseout' restored ALL swaps, including the main picture. I messed around till I got this method. What is interesting is that the original central image ("blankimage") disappears but is not replaced! If you look at the "corporate branding" page, the original image is a collage and this too disappears not to be replaced.

Any solutions there?

Hi Paul,
it is nice and easy to develop page in dreamweaver, but you always get in trouble if you do not understand basic principle of HTML, CSS and little of scripting.
Don't worry I not gone bully you over that, will try to help you if possible. Last year I had had similar problem when my teacher rush me with my final work on project and I was forced to use Dreamweaver (still prefer typing me code).
For this purpose I used catalogues.htm from your site. Go to deamweaver and Design view, click on first thumbnail which id is "thumbvgcatalogue2", then go to Code view and you see this.

<A onmouseover="MM_swapImage('thumbmwcatalogue1','','/images/catalogues/thumbnails/thumbmwcatalogue1pink.jpg',1)" 
 onclick="MM_swapImage('blankimage','','/images/catalogues/mwcatalogue1.jpg',1)" 
 onmouseout="MM_swapImage('thumbmwcatalogue1','','/images/catalogues/thumbnails/thumbmwcatalogue1.jpg',1)" 
 href="javascript:;">
<IMG id=thumbmwcatalogue1 height=95 src="" 
            width=100 border=0 name=thumbmwcatalogue1></A>

Have close look at image tag "IMG". Is there anything wrong? Something missing?

You are missing source image for first loading. src="/images/catalogues/thumbnails/thumbvgcatalogue2.jpg"
That should do it for you now. Any more troubles let me know :)

Member Avatar for peter_budo

Well you are the lucky one from unlucky people, in your case dreamweaver went crazy as you been playing around with image swaping.
There is something wrong with script logic in "MM_swapImage", and I can't figure out what.
The thing is, when you click on thumbnail, central image is cleared and nothing appear. However if you try to see if the image exist you will find it, example :

http://www.conceptwheel.com/images/catalogues/brookwade1.jpg

then go back and click on same thumbnail and your image appear.

What I can sugest is to clear your HTML code of all scripting and save, than again build all behaviors.

To do so, delete whole SCRIPT section in head of html document and delete this parts

<A onmouseover="MM_swapImage('thumbbrookwade1','','
/images/catalogues/thumbnails/thumbbrookwade1pink.jpg',1)"
onclick="MM_swapImage('blankimage','','
/images/catalogues/brookwade1.jpg',1)"
onmouseout="MM_swapImage('thumbbrookwade1','','
/images/catalogues/thumbnails/thumbbrookwade1.jpg',1)"
href="javascript:;"> </A>

which are attached to your thumbnails.

This only thing what I can think of, other solutions are to complex without any knowlege of scripting.

Let me know how it whent on ;)

Member Avatar for paulkaye

I'll try it for one page and see how it goes - I'll let you know when it's done. Thanks for the advice!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.