• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 598
  • Last Modified:

Change embedded .mov using onclick="document.getElementsByName

I want to be able to click on a link and it change a picture and movie file on that page. The picture changes but the video will not.

The code for the links list is:

<ul>
      <li onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='auto';" onclick="document.getElementById('im').src='images/ace1.jpg', document.getElementById('im2').src='movies/ace1.mov'">Ace 1</li>
      <li onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='auto';" onclick="document.getElementById('im').src='images/ace2.jpg', document.getElementsById('im2').src='movies/ace2.mov'">Ace 2</li>
</ul>

The code for the picture and movie holders is this:
  <p><img src="images/ace1.jpg" id="im" width="376" height="280"></p>
  <p><embed src="movies/ace1.mov" id="im2" width="737" height="560" autoplay="false" ></p>
0
Robert Francis
Asked:
Robert Francis
  • 2
  • 2
1 Solution
 
Robert FrancisDirector of Continuous ImprovementAuthor Commented:
This example doesn't resemble what I am doing, and since I know nothing about JavaScript, I am lost.
0
 
leakim971PluritechnicianCommented:
Try this :

we use : SetURL(url)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function changeMovie(moviename) {
		movie = document.getElementById("im2");
		original_url = movie.GetURL();
		url = original_url.substring(0,original_url.lastIndexOf('/')+1) + moviename;
		movie.SetURL(url);
	}
</script>
</head>

<body>

<ul>
    <li onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='auto';" onclick="document.getElementById('im').src='images/ace1.jpg';changeMovie('ace1.mov');">Ace 1</li>
    <li onmouseover="this.style.cursor='pointer';" onmouseout="this.style.cursor='auto';" onclick="document.getElementById('im').src='images/ace2.jpg';changeMovie('ace2.mov');">Ace 2</li>
</ul>

<p><img src="images/ace1.jpg" id="im" width="376" height="280"></p>
<p><embed src="movies/ace1.mov" id="im2" width="737" height="560" autoplay="false" ></p>

</body>
</html>

Open in new window

0
 
Robert FrancisDirector of Continuous ImprovementAuthor Commented:
Awesome. One last question. When I first load the page the move does not automatically start. But when I click on the link, the movies do automatically start. Any ideas how to stop this?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now