JavaScript function in a div

Question

I created a JavaScript function that is what essentially is a "banner" that cycles through two images. The problem I'm having is that its placing this "banner" in my static website banner/logo at the top of my page.

I would like to put this script/function in a div so that I can place it where I would like, on my page. I have tried various things but I can't figure it out.

heres what my code looks like: ...

<body onload = "var begin = setInterval('special_ad()', 2000);">
...
...
<div id="special_banner">

    <script type="text/javascript">
    /*<![CDATA[*/
    var curImage = "banner1";
    function special_ad(){
        if (curImage == "banner2"){
        document.images[0].src = "images/banner1.png";
        curImage = "banner1";
        }
        else{
            document.images[0].src = "images/banner2.png";
            curImage = "banner2";
        }
    }
    /*]]*/
    </script>
    <p></p>
</div>
...
</body>

"..." being other code i didn't think necessary to post. Now currently i have the script located in the div "special_ad" and the onload syntax in the body tag but it just places the image at the top of my page.

What do I need to do to call the function in the div I want, so that I can control where the image/banner are located on my page?

The location of the script does not define the location of the image that you load. — Chief Wiggum, Oct 30 '14 at 02:47
If you're happy with one of the answers please accept it. Cheers! — Chief Wiggum, Oct 30 '14 at 10:16

score 0 · Answer 1 · answered Oct 30 '14 at 02:50

place your <img src=""> inside div in which you want

<div>
  <img src=""/>
</div>

script location does not define where images will put

a sample code for you

<html>
<head>
<style type="text/css">
.animation{
margin:0 auto;
padding:0px;
width:960px;
height:300px;
background-color:#CCC;
border:7px solid #DDD;
position: relative;
}
img{
margin:0 auto;
padding:0px;
width:960px;
height:300px;
}
.pp{
opacity:0;
margin:0 auto;
padding:0px;
width:47px;
height:30px;
background:url("images/play.jpg") no-repeat;
position: absolute;
top: 47.5%;
left: 47.5%%; 
}
.pp:hover{
opacity:1;
}
</style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var flag=1;
function call(){
if(flag){
    document.getElementById("pp").style.backgroundImage = 'url(images/pause.jpg)';
    flag=0;
    }else{
    document.getElementById("pp").style.backgroundImage = 'url(images/play.jpg)';
    flag=1;
    }
}
</script>
<script type="text/javascript">

var i=2;
var imageName="";
function animate(){

  setTimeout(function () { //setTimeout
imageName=  "images/0"+i+".jpg";
     document.getElementById("img").src=imageName;
     ++i;
     if(i==9)
        i=1;
    animate();
    }, 2000);
}

</script>
</head>
<body onload="animate()">
<div class="animation" id="animation">
<img src="images/01.jpg" id="img">
<div class="pp" onclick="call()" id="pp"></div>
</div>
</body>
</html>

yeah you lost me with that sample code, that's a bit beyond my comprehension at the moment — mussy46, Oct 30 '14 at 03:07
you can put your image where u want.just place the tag there where u want to place.then changing its src.If you place it in div1 then it will show there, if inside div2 image will show inside div2 and son on... — Rasel, Oct 30 '14 at 03:12

score 0 · Answer 2 · answered Oct 30 '14 at 02:53

0

You need to define an img tag and then update the src of that image in your script:

<body onload = "var begin = setInterval('special_ad()', 2000);">
<div id="special_banner">
    <img id="myImage" src="images/banner1.png" />
</div>

    <script type="text/javascript">
        var curImage = "banner1";
        function special_ad(){
            if (curImage == "banner2"){
                document.getElementById('myImage').src = "images/banner1.png";
                curImage = "banner1";
            }
            else{
                document.getElementById('myImage').src = "images/banner2.png";
                curImage = "banner2";
            }
        }
    </script>
</body>

answered Oct 30 '14 at 02:53

Chief Wiggum

2,784
2
31
44

I have a question why is the "I" in myImage and curImage capitalized? I'm doing a classwork assignment and it doesn't state anything about it. – mussy46 Oct 30 '14 at 03:01
It's just a coding convention. Usually js variables are named in that pattern. For more info & links have a look here: [link](http://stackoverflow.com/questions/921133/javascript-naming-conventions) – Chief Wiggum Oct 30 '14 at 10:14

score 0 · Answer 3 · answered Oct 30 '14 at 02:53

Hope this can help you out

though this is a simple but its a good start to learn

<div id="special_banner">
<img id="img" src="zhs.png" alt="">

<script type="text/javascript">
/*<![CDATA[*/
var curImage = "banner1";

function special_ad(){
    if (curImage == "banner2") {
    $("#img").attr('src', "zhs.png");
    curImage = "banner1";
    }
    else{
        $("#img").attr('src', "zht.png");
        curImage = "banner2";
    }
}
/*]]*/
</script>
<p></p>
</div>

JavaScript function in a div

3 Answers3