Now, you probably ask "Where I need to write the code?" - Well you can write it in any HTML editor like Adobe Dreamweaver or you can write it simply in Notepad (this is what I will describe in this tutorial), because HTML and Javascript don`t require a compiler like C++.
Just open Notepad and write the following code in a blank file:
<html>Now click on File >> Save as...
<head>
</head>
<body>
<!-- Code goes here -->
</body>
</html>
At the file name type in any name, but end it with .html, (e.g.: slideshow.html), and at Save as type select All files
To preview your page just open your file in a browser like Firefox or Internet Explorer - it should be a blank page.
It`s useful to preview you code from time to time, because if you get an error at the end you will need to recheck the whole code.
Now, you can remove the <!-- Code goes here --> line, just remember that the code needs to be placed between the <body> and </body> tags.
Creating the div`s
We need 3 div`s (a div is like and invisible box):
- one to hold the entire slideshow (the following 2 div`s) - call it slideshow (id="slideshow")
- another one to hold the images (one at a time) - slideshowimage
- and one to hold the control buttons (next, prev...) - slideshowcontrols
Note: All of these divs will have fixed width, I will use 400px, but you can use any size, because the script will detect any size, but make sure that you use the same width for all of them!
Use for all of the divs the overflow:hidden; option.
I recommend to use inline CSS (using the style="" tag)
Here is my code:
<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
</div>
</div>
Start working with Javascript
Write the following code bellow the above code (before </body>):
<script type="text/javascript">These are the starting and the ending tags of Javascript.
</script>
Now create between those tags function called changeimage and inside alert "ok":
<script type="text/javascript">Now we need something to trigger the function. The images will change on pressing a button: Prev, Next or by clicking the image, so first let`s add the two buttons to the slideshowcontrols div:
function changeimage(){
alert("ok");
}
</script>
I will use a tags with onclick event:
<a onclick="changeimage();">Prev</a>Save your file and click on one of the buttons - it should alert "ok".
<a onclick="changeimage();">Next</a>
If you have followed with attention each step your code should look like this:
<html>Well, I think this is enough for now, soon I will post the following parts, too. Sorry for my bad english, if you have any question just ask, I will help if I can.
<head>
</head>
<body>
<div id="slideshow" style="width:400px;overflow:hidden;">
<div id="slideshowimage" style="width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onclick="changeimage();">Prev</a>
<a onclick="changeimage();">Next</a>
</div>
</div>
<script type="text/javascript">
function changeimage(){
alert("ok");
}
</script>
</body>
</html>
![[SOLVED] javascript filter problem - last post by Orjan](http://forum.codecall.net/uploads/profile/photo-thumb-18024.jpg?_r=1488878473)
