CODEWITHSUNDEEP
javascriptjquerycss
Mary
Mary

Reputation: 365

Div width and height does not fit the image

enter image description hereI am trying to change the color of a transparent image inside a div (using jQuery). I cannot get the left and top of the image fixed into the div while changing the color.

Could anyone help? I'm trying to have the image filled if a user clicks on any of the span colors.

test.css:

.iconWrapper .color span
{
    width: 50px;
    height: 58px;
    display: block;
}
.color1
{
    background-color: #f6f6f6;
}
.color2
{
    background-color: #ffe25b;
}
.color3
{
    background-color: #e35990;
}
.color4
{
    background-color: #58c1d8;
}

step1.php

<link rel="stylesheet" type="text/css" href="test.css" media="screen" />
<script language="javascript" type="text/javascript">

    $(function() {
        $('.iconWrapper span').click(function(e){
        var color=$(this).attr('class');
            //alert(color);
            $('#div1').removeClass().addClass(color);
            $('#hiddencolor').val(color);
            e.preventDefault();
        });    
    });    
</script>
</head>
<body>
    <div class="iconWrapper">
        <ul class="color">
            <li>
                <a href="#" title="Selecteer"><span class="color1"></span></a>                               
            </li>
            <li>
                <a href="#" title="Selecteer "><span class="color2" ></span></a>                               
            </li>
            <li>
                <a href="#" title="Selecteer"><span class="color3"></span></a>                               
            </li>
            <li>
                <a href="#" title="Selecteer"><span class="color4"></span></a>                               
            </li>
        </ul>
    </div>
    <div id="div1" style="width:17%; height:28%;" ><img src="img/107.png" />
    <form method="post" action="step3.php">
        <input name="kleur" type="text" value="" id="hiddencolor" />
        <input name="submit" type="submit" value="Submit" />
    </form>   
</div>

Upvotes: 1

Views: 352

Answers (3)

ANeves
ANeves

Reputation: 6365

        $('#div1 img').removeClass().addClass(color);

Would this be what you wanted?

If what you want is the color to not spill out of the borders inside the image, the only solution I can find is to edit the image so that there is white where you don't want to see the colour - rather than transparent.

I have trouble understanding what it is exactly that you want to achieve. :|

Upvotes: 1

Shef
Shef

Reputation: 45589

Try:

$(function () {
    $('.iconWrapper span').click(function (e) {
        var $span = $(this),
            color = $span.attr('class');
        $('#div1 img').css('background-color', $span.css('background-color'));

        $('#hiddencolor').val(color);
        e.preventDefault();
    });
});

Test the effect here »

Upvotes: 0

Sotiris
Sotiris

Reputation: 40036

Change the width of the parent div from 17% to the width of img in other words 250px

Demo: http://jsfiddle.net/V9zEH/5/

Upvotes: 1

Related Questions