Question

I’ve written an image scroller in html/css/js, a very simple one: right button is clicked, I go through all images inside “holder”-div and change the class of the image after the one with classname=”current”.

But that’s not where the problem lies, I think. Whenever I successively click on the left or the right button, the image in the div gets selected (blue selection box). If I successively click the left button, even the text above it gets selected.

<div class="grid_4 omega image_box">
    <div id="txt_choose" class="image_txt">
        this is helpful text
    </div>
    <div id="alt_spacer"></div>
    <div id="image_content" class="image_content" onclick="chooseImageType(this)">
        <div id="current" class="current"><img src="images/default1.png" /></div>
        <div id="current" class="hidden"><img src="images/default2.png" /></div>
    </div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>

and this is the css:

.image_btn_right
{
    width           : 20px;
    height          : 20px;
    position        : relative;
    float           : left;
    margin-top      : -170px;
    margin-left     : 260px;
    z-index         : 4;
    cursor          : pointer;
    background-image: url('../images/right.png');
}
.image_btn_left
{
    width           : 20px;
    height          : 20px;
    position        : relative;
    float           : left;
    margin-top      : -170px;
    margin-left     : 20px;
    z-index         : 4;
    cursor          : pointer;
    background-image: url('../images/left.png');
}
.image_content
{
    height          : 280px;
    background-color: white;
    margin          : 10px;
}

on request, my javascript:

function showNext()
{
//vars
var shown = false;
var current;

$('#image_content > div').each(function()
{
    if($(this).attr('class') == "current")
    {
        current = $(this);
        shown   = true;
    }
    else if($(this).attr('class') == "hidden" && shown == true)
    {
        current.hide();
        current.attr('class', 'prev');
        current.attr('id', '');
        $(this).show();
        $(this).attr('class', 'current');
        $(this).attr('id', 'current');
        shown = false;
    }
});
}

Is there anyway to stop the image and the text above to be selected like that (without actually making them not selectable)?
Could it be because of the relative position of the buttons and their z-index..?

Answer 1

I found the answer and it was painfully easy.. >_>

I just needed to wrap the buttons in another div, so they became more eperated from the rest of the html.

Like so:

<div>
    <!--- left button --->
    <div class="image_btn_left" onclick="showPrev()"></div>

    <!--- right button --->
    <div class="image_btn_right" onclick="showNext()"></div>
</div>