0

My code:

<head>
<style>
...
    .content {
        float: left;
        position: absolute;
        display: block;
        margin: 0 auto;
        padding: 0;
        height: 720px;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        background-image: url("im1.jpg")
    }
    ...Positioning of #slider...
    ...Visual formatting of #pic1 #pic2 #pic3...
...
</style>
</head>
<body>
<div class="header">
    ...navigation bar...
</div>
<div class="content">
    <p>...some heading text...</p>
    <div id="slider">
        <span id="pic1">&#9679;</span>
        <span id="pic2">&#9679;</span>
        <span id="pic3">&#9679;</span>
    </div>
</div>
...more content...
</body>

My goal is to change the background image of the content class, specifically making it slide left to the view another image triggered by the respective bullet symbol (&#9679;).

I've looked into this and this but none of them addressed the specifics that I'm looking for.

Overview of what I want:

._______________. ._______________. ._______________.
|               | |               | |               |
|               | |               | |               |
|    Image 1    | |    Image 2    | |    Image 3    |
|     Main      | |               | |               |
|     . . .     | |     . . .     | |     . . .     |
|_______________| |_______________| |_______________|

  Click dot #1      Click dot #2      Click dot #3

I'm perfectly willing to implement methods other than background-image if they do not tamper with my layout. Although I want to avoid using jQuery (it doesn't seem to work), I would use it only if it is a must. I would prefer plain javascript and/or CSS.

How would I go about this?

Community
  • 1
  • 1
pwn'cat
  • 111
  • 1
  • 6

1 Answers1

0

Will this do? HTML:

        <div class="content" id="content">
        <p>...some heading text...</p>
        <p>And some more text...............................</p>
        <div id="slider">
            <span id="pic1" onclick="chgBackground('book2.jpg');" style="cursor:pointer">&#9679;</span>
            <span id="pic2" onclick="chgBackground('book3.jpg');" style="cursor:pointer">&#9679;</span>
            <span id="pic3" onclick="chgBackground('book4.jpg');" style="cursor:pointer">&#9679;</span>
        </div>
    </div>

CSS:

        .content {
        float: left;
        position: absolute;
        display: block;
        margin: 0 auto;
        padding: 0;
        height: 720px;
        width: 100%;
        max-height: 100%;
        max-width: 100%;
        background-image: url("images/book2.jpg");
        background-repeat: no-repeat;
        background-position: center; 

         transition: background 1s linear;
    }

Javascript:

            function chgBackground(i) {

                var div = document.getElementById("content");
                div.style.backgroundImage = "url(images/"+i+")";
            }
T.Shah
  • 2,768
  • 1
  • 14
  • 13