Do you know how to implement this functionality in Javascript (regardless of the CMS -- like if you were just building a static page)? Or did you just use a plugin on the other site and aren't really familiar with HTML/CSS/Javascript?

Hi Jordan

Yes I implemented this functionality without any CMS or Add On just pure javascript and html based on a static page. I'm familiar with html, javascript and css.


This goes in the HEAD:

<SCRIPT language="JavaScript">
<!--
if (document.images)
{
image_off= new Image();
image_off.src="Artists/artist pages/KOH.jpg";
image1= new Image();
image1.src="Artists/artist pages/KOH.jpg";
image2= new Image();
image2.src="Artists/artist pages/WANG.jpg";
image3= new Image();
image3.src="Artists/artist pages/CHAE.jpg";
image4= new Image();
image4.src="Artists/artist pages/PARK.jpg";
image5= new Image();
image5.src="Artists/artist pages/HAN.jpg";
image6= new Image();
image6.src="Artists/artist pages/OH.jpg";
image7= new Image();
image7.src="Artists/artist pages/LEE.jpg";
image8= new Image();
image8.src="Artists/artist pages/CHOI.jpg";
}

function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
//-->
</SCRIPT>

The first block of code initialises the images and
the second block is the function that swap the images on mouseover


In the BODY here's the markup:

<ul>
<li><a href="Artists/Sankeum KOH/KOHimages.html"
onMouseover="change1('pic1','image1')"
>Sankeum KOH</a></li>
<li><a href="Artists/Ziwon Wang/WANGimages.html"
onMouseover="change1('pic1','image2')"
>Ziwon WANG</a></li>
etc...
</ul>

Each list item represents a link which calls change1 function on Mouseover

<div class="entry">
<img src="Artists/artist pages/KOH.jpg" name="pic1" />
</div>

pic1 named above changes when the change1 function is called

There is no need link this to JQuery as far as Im aware

You could certainly create a custom template for the slideshow block to achieve that effect. How familiar are you with php and javascript? Does the html / js have to be exactly the same as what is on that sample site?

Hi Triplei

Not familiar with PHP at all. JavaScript i can work with.

And yes, the html / js have to be exactly the same as what is on that sample site

The first thing you want to do is use a custom template for the autonav block. The autonav block will display links to pages, and putting a custom template on it means that you can alter its normal HTML and PHP code to include the javascript that's needed to do the rollovers (so you do not have to write specific javascript for every image, you let the code in the custom template do the work for you -- which means if you add more pages later they will also have the rollover functionality).

The second thing you want to do is be able to assign a rollover image for each page that's being listed in the autonav block. You do this with a "custom attribute", and you set the attribute on each individual page (not in the overview page that has the rollover navigation on it -- rather, the custom template referred to above will pull that image attribute from each page it is listing and use that in its javascript code).

Here's specific instructions:
1) I've attached a custom template (you will need to unzip it after downloading). Create a new folder on your server in the "blocks" directory called "autonav" (make sure this is in the top-level "blocks" directory of your site, NOT inside the "concrete" directory). Then inside that new "autonav" folder you created, make another new folder called "templates". Inside THAT folder, add the unzipped file I've attached.

2) Log into your site and go to the dashboard. Click on "Pages and Themes", then click the "Attributes" tab up top (it's kind of small -- white text on a dark grey background). Down below where it says "New Attribute", click on the dropdown and choose "Image", then click the "Add" button. For the handle, enter "rollover_image", and for the name, enter "Rollover Image". None of the other settings matter -- just click "Save" (or Add or whatever the button is called).

3) Go to the page that has the rollover thing on it, click "Edit Page" in the toolbar, and add the autonav block to the page in the appropriate area (you may need to modify your theme's page type template to allow for an editable area in the appropriate spot). You'll have to figure out what autonav settings are correct to list the pages that you want to link to (probably the pages underneath the current page, depending on how you arranged the pages in your sitemap). After you've added the block, but before exiting edit mode, click on the block and choose "Custom Template" from the popup menu. Then choose "Rollover Images" from the dropdown menu and click "Save" (or whatever the button is called).

4) Go to each page that the autonav is linking to, click "Edit Page", then click the "Properties" button in the toolbar. In the "Add Attribute" list, choose "Rollover Image", then choose the image you want to use for that page's rollover. Save that and Exit Edit Mode (publish the changes). Repeat for all of the pages you want to have the rollover effect for.

That should do it. You don't need any of the javascript code you had before, and you don't need the html for the list (both of those are in the attached custom template file). The only thing you do need is to make sure that somewhere on that page is the div with class="entry" and the image tag inside of it.

Enjoy!

-Jordan

Hey Jordan,

Thank you so much for your reply. This is such a detailed response! It sounds like a plan, I'm going to give this a go and get back to you.

Cheers

Hey Jordan,

Your instructions are excellent, i have followed them carefully, but for some reason the rollover affect doesn't work.

I wonder if is has something to do with the img tag in .entry div.
firstly tried to add an image to a block, on the same page as the Auto-nav block with the artist links. Then I tried to enter the actual img tag itself in the block, e.g <img src="" alt=""/>. Neither of these worked.

Don't know where i've gone wrong
Have you tested this? Does rollover_images.php work?

thanks in advance
M

No, I didn't test it. It's impossible for me to say why it doesn't work without seeing the site -- do you have a link you can send me?

I also encourage you to try to track down the problem yourself -- if you're already familiar with HTML/CSS/Javascript, this shouldn't be too much of a problem. I also highly recommend installing FireBug (a free firefox extension) if you haven't already -- it will show you if there's a javascript error somewhere, and also let you click around in the HTML and make changes on the fly to see if it fixes anything.

-Jordan

Here's my link;

http://www.mackenzy.me.uk/concrete5.4.1.1/artists1/...

OK will have another look at the code.
Firebug seems cool, will download that.

Oh yes, I had mistakenly put the rollover onto the click event instead of mouseenter.

Edit this file on your server:
YOURSITE/blocks/autonav/templates/rollover_images.php

Find this line down at the bottom:

and change it to this:


(And note that the third page does not currently have the image attribute assigned so it will not show any rollover until you do that).

-Jordan

Amazing, it works! your a genius!
Thank you so much dude...i need to start learning some php

M