Image Swap Menu (free)

[Adendum]

The Image Swap Menu is now available from the main extension site - here and also from my extension demo site. The help file is also available online from the same page.

This extension is a CSS based menu with a variety of options. You will need to create 10 images to suit your own site; 8 unique images for each of the swappable images and just 2 images for the main menu navigation. The ZIP file also contains 2 .psd files to show you how I made the images for the demo.

Once published the page will include the 10 images from the demo but these can be deleted when you have created your own images. You do not need to use the file names from the demo.

* Create eye catching custom menus.
* Fully linkable text in <h2>, <h3>, and also <p> text.
* <p> text entered with HTML Text Box; therefore many additional options available to you.
* Image transition fade - customisable speed.

PLEASE READ THE HELP FILE BEFORE REQUESTING SUPPORT.

Demo of the extension

[zinc]

Looking good.... I like it. Nice one and great job A

[zinc]

Great job. I like it

[Adendum]

lol, Bendigo,......so good you posted twice. I'm honoured!

[zinc]

Quality work deserves it

[me.prosenjeet]

5 STARS!!!

Great Job!

[jordan]

nice addition again … !
+TNX for your index update mail Adendum, as always appreciated . .

[Adendum]

14/09/11 : Minor update to force images to publish to your images folder.
14/09/11 : Minor update to fix error is H2 and H3 font colour options.
15/09/11 : Minor update to correct double P tags being written when using HTML Text Box

[morgan]

Excellent extension, thank you for taking time to make it.

Dan

[Adendum]

Version 1.0.0.4 available.

Due to some issues with the HTML Textbox extension (users have to press carriage return to get the <p> tags) I have adjusted the Image Swap Menu extension so it no longer uses HTML Textbox.

Update available from the main extension site or my demo site.

[Adendum]

Version 1.0.0.5 available.

I have updated just the help file to better explain the image requirements and their usage within the extension.

For those that were not aware the demo images were created in Photoshop and I have supplied two layered .psd files within the download .zip so you can use these as examples to create your own menu images.

[Adendum]

Many thanks to Pascal for spotting an error with the linking within the 5th menu item!

Extension updated 08/11/11 (18:55 GMT) : and available from both locations.

[Adendum]

Aww shucks Pascal...I'm all overcome

For anyone interested you can see corchpattes really nice implementation of the Image Swap Menu from the demo page.

I'd add the link to the Stacked Images page but I can't remember where you used it Pascal?

[Adendum]

lol - I'm getting old and forgetful!!

[Adendum]

10/11/11 : Having only realised I could do this yesterday (doh!) I have modified this extension (and all my extensions - see list below) so that the live rendering of the extension in design view is greatly improved. In many cases the design view will take on a background colour you set in the extension properties.

Updates available from the WWB extensions site and my own demo site. Remember to check out the extensions listed below.

Anything Slider
Automated ToolTip
Directory Listing
Elastic Thumbnail Menu
Image Information Panels
Kick-Butt-Mega-Menu
Orbit Slider
PhotoInfo
Simple Horizontal Accordion
Slide Down Box Menu
Stacked Images
tab Slide Out

[Pascal-Gilles]

Hello Paul,

Unfortunately, since yesterday, I cannot access to your site (connection time too long).

Am I alone in this case ?

Cheers !

[Pascal-Gilles]

Thanks Radjesh Klauke for the info.

It doesn't work either, as if my IP was blocked by the hoster... Every other site is accessible without any trouble.

Hum...

[Adendum]

@crochpattes,

No problems with the site as far as I can tell. Email me separately if you are still experiencing problems. I guess it is possible your IP has been blocked - it's a super sensitive server set up. Drop me a line so I can forward it to my engineers in Denver.

@Radesh,

What's weird? Ditto re emailing me

[Pascal-Gilles]

Hi Paul,

Yes, it might be an oversensitivity little issue. I'll get to u by email.

I assume that Radesh was talking about my situation which is weird, not your extension

[Adendum]

Thanks Radjesh Klauke for the info.

It doesn't work either, as if my IP was blocked by the hoster... Every other site is accessible without any trouble.

Hum...

Yup, your IP was blocked. It's been cleared now. So no more attempts to hack in to the site and you'll be ok!

[Pascal-Gilles]

Thanx and I'll be a more discrete hacker the next time

[Adendum]

20/02/12 : Image Content and CSS file now published to the /ism folder.

You may need to re-link any images if you open a project that uses an earlier version of this extension. Earlier versions of this extension required the published images to be moved to the /images folder. Now all images are all automatically published to the /ism folder.

[Adendum]

Version 1.0.10 now available.

Added float:left; to the CSS file to overcome issues with H2 and H3 tag conflicts when using a single CSS file setting in WWB8.

[Adendum]

Version 1.0.11 now available.

Modified HTML and JS to ensure that Sticky Layers will work when used in conjunction with this extension.

Many thanks to RZ and Jordon for helping with this issue!

[Adendum]

sindrehaugen,

You appear to have specified the same image for both the "Under Image of tab menu" and for "Over Image of tab menu". These images are used for the navigation so if you want TEXT you need to create the images with text in them; the extension doesn't create text for this part of the menu - text is only placed in the upper part of the extension.

Code: Select all

ul#ISM-tabs a {
    background-image: url("./ism/tabmenuunder.jpg");
    height: 100px;
    width: 117px;
}
ul#ISM-tabs a:hover, ul#ISM-tabs li.selected a {
    background-image: url("./ism/tabmenuunder.jpg");
    height: 100px;
    width: 117px;
}

Go back into the extension and specify a different image for the OVER part. Also the images you have specified are too small at 100x117. They should be the same width as the main swap images.

Might help if you read the help file again.

[Adendum]

Hi people,

I have had a support email for Image Swap Menu that has kinda thrown me as I can't work out where the problem is. This extension hasn't changed for several months, so I am beginning to lean towards the changes in WWB that may be contributing to the issue. Whatever the issue I can't figure it out so I am putting out a call to all you extension gurus and Pablo.

The problem:
When hovering over the lower set of images the upper image is meant to change (swap!) but it may only swap out images in inconsistent circumstances. The original support email suggested "This menu only functions correctly if I come from a link on a web site or type it in directly. If I use a bookmark the images don't swap." but I have found that the problem extends further than that.

I have recreated the demo page several times with nothing but the extension in play to ensure there are no conflicts and the same issue occurs. Unfortunately all local publishes and preview work perfectly and the problem is only seen when you upload files to the server (a clue maybe?).

Another clue is that my old site from 2-3 years ago uses this extension and it all works perfectly. Take a look at the old site here.

Of course this old site shows that it's using jQuery 1.6.4, whereas the new site uses 1.7.2. So I created another version of the demo that uses 1.6.4 (seen here) but that made no difference.

So I'm stumped ... anyone got any ideas?

[Pascal-Gilles]

Hi Paul,

Hope you're fine

Well, at first sight I would say that you're facing an images path trouble in the generated CSS.

But I didn't have time to go deeper, even if it smells this kind of problem.

Cheers!

[Adendum]

Pascal,

Bon soir mon amie! I am fine thanks..just confused!!!

That was my first thought but if I look at the published demo page and use Firebug to check the css all the images have correct urls and hovering in the css shows all of them.

So it's not CSS...must be......????

[BaconFries]

Hi Paul ok I havent installed the extension as of yet to check if I may be right or wrong. Some time ago a member was using one of my extension and it wasnt working as it should, now for the life of me I couldnt figure it out, I then relized what may be wrong, so I asked them to check if they had checked any of the following in Tools>Options>HTML>Generate external css,Generate single css or Optimize inline styles and if memory serves me correct the had checked Optimise inline style checked once unchecked the extension worked as normal....I may or may not be correct but it worth asking or trying this and see the outcome.

[Adendum]

Hi Calum,

My settings have been the same since day 1 of using WWB. I have "Generate single CSS style sheet for global styles" checked and the "page specific styles" and "optimise" are both unchecked.

I did just upload three 'versions' using different WWB HTML settings but there was no change.

What's worse is I just made four visits to the page using Chrome. I cleared the cache each time. 1st visit, no swap, 2nd visit images swapped, 3rd visit images swapped, 4th visit no swap. FFS!

And again - if I preview locally everything is perfect. If I publish locally everything is perfect. I also deleted the entire folder from the server an manually uploaded the folder and files from a clean and apparently working publish....but hey ho...nada!

Doesn't make sense...........

[Pascal-Gilles]

Hi Paul,

From my side, I made the following test: grab your page on my local disk with HTTrack Website Copier, and it works perfectly

However, did you try to remove all the things that don't belong to the image swap menu, keeping only the jQuery library and the ISM js?
I'm thinking of some kind of jQuery conflict that would be enabled online.

Cheers!


EDIT: http://www.aditerum.co.uk/demo/ISM/gatag.js - When disabled, the ISM works online, enabled again, the trouble is back. Hope this can help...

[Adendum]

Pascal,

Apologies for the long delay....I've had a nightmare 12 days, C: drive failure, multiple formats and re-installs and eventually a new hard disk and the challenge of formatting a disk with no operating system...and then a re-install of OS and everything. Painful!

Anyway I am finally back up and running and had a look at this post - and YES that did help!

By moving the GA code from between the <head> to the end of page the problem evaporates. I still can't work out why that should make a difference and/or why it used to be OK. But moving it works.

Any insights as to why this happend would be of interest.

[Pascal-Gilles]

Hi Paul,

Glad this period has ended and the puzzling page could now work

About your question, I don't know the GA script but maybe some have left similar troubles on the web...

Anyway, take care!

[Adendum]

Pascal,

Yeah you do know the GA code..... Google Analytics code.

My nightmare hasn't ended after all... had a few odd thing happen (task bar wouldn't unlock, start menu item dissapeared and so on) .. so ran sfc /scannow in an admin dos window and I have numerous corrupt files. So I've ordered a new OS and will begin the reformat and re-install process all over again in a couple of days...deep joy!

[Vlastimil]

Hi. i love this nice extensions, it`s possible add "slideshow" for cyclic swap in time interval for menu/images, or made this using another way?

[Adendum]

No.