[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

js picture rotation and...

Posted on 2014-07-13
2
Medium Priority
?
189 Views
Last Modified: 2014-07-15
I have the attached code rotating some images.

Question 1: How can I add a text box showing some description about the picture (please see the attache image)?
Question 2: How can add the little circles (one per pic) with the one led-up for the current picture?

I hope you can give me a working sample of some sort, if you have any, instead of writing about it.

Thank you.

HTML CODE:
===========================
<!DOCTYPE html>

<html>
	<head>
	<link type="text/css" href="main.css" rel="stylesheet"/>
	</head>

	<body>
	<div id = "project-pictures">
	<img src="images/img1.jpg" height="505" width="942"id="mainImage"/>
	</div>

	<script src="script.js"></script>

	</body>

</html>



JS CODE:
=======================
var myImage = document.getElementById("mainImage");

var imageArray = ["images/img2.jpg","images/img3.jpg"];

var imageIndex = 0;

function changeImage() {
	myImage.setAttribute("src",imageArray[imageIndex]);
	imageIndex++;
	if (imageIndex >= imageArray.length) {
	imageIndex = 0;
	}
}

var intervalHandle = setInterval(changeImage,5000);

Open in new window

Images.png
0
Comment
Question by:Mike Eghtebas
2 Comments
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 40194434
Use a transparent div with the text and position it relative to the image with a higher z-index.

Alternatively just download and use http://wowslider.com/rq/how-to-make-image-scroller-code-title-linked-3O.html
0
 
LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 40196520
Thank you.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question