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">●</span> <span id="pic2">●</span> <span id="pic3">●</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 (●).
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?
