CODEWITHSUNDEEP
javascripthtmlcss
Rob_IGS
Rob_IGS

Reputation: 575

How to create active/inactve thumbnails in HTML/Javascript

I am setting up a "Billboard" for the home page of a site. The billboard will have an active image displayed and there will be thumbnails of the right that are used to change the image on the billboard.

Something like this:

Billboard

Currently I swap the images like this:

        <div id="_bbImage">
        <img src="images/bill1.png" class="bbImage" id= "MainBB"/>
        </div><!--_bbImage-->

        <div id="_bbTab1" class="inactiveTab">
        <a href="images/bill2.png" onclick="swap(this); return false;">
            <img src="images/bbtab1.png" class="bbTabImg" id="bbTabImg1"  />
        </a>
        </div><!--bbTab1-->

and the JavaScript function looks like this:

function swap(image){document.getElementById("MainBB").src = image.href;}

But now, I would like to have the thumbnail to have a different class when Its selected or "Active" to achive this effect: enter image description here

I need to accomplish the class switch to active, but I also need to make sure that the previously selected tab gets set back to the "inactive" class again.

I tried something like this: 

function inactiveTab(name){document.getElementById(name).className = "inactiveTab";}
function activeTab(name){document.getElementById(name).className = "activeTab";}
function inactiveTabAll(){
inactiveTab("_bbTab1");
inactiveTab("_bbTab2");
inactiveTab("_bbTab3");
inactiveTab("_bbTab4");
inactiveTab("_bbTab5");
inactiveTab("_bbTab6");

}

with:

<div id="_bbTab1" class="inactiveTab">
        <a href="images/bill1.png" onclick="swap(this); inactiveTabAll(); activeTab("_bbTab1"); return false;">
            <img src="images/bbtab2.png" class="bbTabImg" id="bbTabImg1"  />
        </a>
</div><!--bbTab1-->

But this doesn't seem to be working, when I click on the thumbnail I just get linked to a blank page with "image/bill2.png" image displayed.

Does anyone know a good way to accomplish this, or can anyone point me in the right directions.

Thanks in advance,

Rob

Upvotes: 1

Views: 526

Answers (3)

Aaron Digulla
Aaron Digulla

Reputation: 328760

Instead of img elements, use divs and put the image into the background (use the background-image style). This allows you to define which image should be displayed where in pure CSS. You can also swap images by adding/removing classes:

.bbTabImg { background-image: url(images/bbtab1-inactive.png); }
.bbTabImg.active { background-image: url(images/bbtab1.png); }

As for inactive, use this jQuery:

$('.active').removeClass('active');

This finds all elements with the active class and turns it off. Now you can set one of them active again and the CSS above will load the correct image.

Upvotes: 0

Ohad Milchgrub
Ohad Milchgrub

Reputation: 122

the problem is that you are using an href for the image inside the tag. an tag is originally a link to a given url replace href="xx.png" with href="javascript:swap(this); inactiveTabAll(); activeTab("_bbTab1");"

I don't understand what's the original role of the href in your code, but you don't seem to be using it anyway

Upvotes: 0

mcknight
mcknight

Reputation: 615

In my opinion, you could have a look at the following jquery method:

http://api.jquery.com/hover/

It has callback functions, where you can make your content visible / invisible.

Instead of your "inactivateTab" - function, you could use the "hide"-method:

http://api.jquery.com/hide/

Upvotes: 3

Related Questions