HomeworkLib
Question

1) With the partial code below, create a web page that looks like the one below and complete the given code. Make sure work that the correct image corresponding with the correct hyperlink is displayed in the right frame whilst all the hyperlinks are listed in the left frame.

<html>

<head>

<script>

function setImage(index)

{

    if (index == 1)

    {

      RightFrame.document.RightImage.src = "lions.jpg";

    }

    if (index == 2)

    {

      RightFrame.document.RightImage.src = "tigers.jpg";

    }

return;

}

</script>

</head>

<frameset cols="20%,*">

<"LeftFrame" src="left9rvw.html">

<"RightFrame" src="right9rvw.html">

</frameset>

</html>



ANIMAL IMAGES Lions Tigers Bears Camels Zebras Elephants
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Code for following:

<html>

<head>
<body>
<h2> ANIMAL IMAGES </H2>
<br>
<br> <a $id="1" href="img.jpg">Lions</a>
<br> <a $id="2" href="#news">Tigers</a>
<br> <a $id="3" href="#news">Bears</a>
<br> <a $id="4" href="#news">Camels</a>
<br> <a $id="5" href="#news">Zebras</a>
<br> <a $id="6" href="#news">Elepahnts</a>

<script>
function setImage(id)

{

if (id == 1)

{

RightFrame.document.RightImage.src = "lions.jpg";

}

if (id == 2)

{

RightFrame.document.RightImage.src = "tigers.jpg";

}
if (id == 3)

{

RightFrame.document.RightImage.src = "Bears.jpg";

}

if (id == 4)

{

RightFrame.document.RightImage.src = "Camels.jpg";

}

if (id == 5)

{

RightFrame.document.RightImage.src = "Zebras.jpg";

}

if (id == 6)

{

RightFrame.document.RightImage.src = "Elephants.jpg";

}

return;

}

</script>

</head>


<frameset cols="20%,*">

<"LeftFrame" src="left9rvw.html">

<"RightFrame" src="right9rvw.html">

</frameset>

</body>
</html>

Because Frame tag not supported in HTML5 this may casue problem but it perfectly work HTML(Simple)

This may be the good solution.

<html>
<head>
<title>Assignment</title>

<script>
function setImage(index)
{
parent.frames.RightFrame.window.postMessage(index);
return;
}
</script>
</head>
<body>
<br> <a $id="1" href="img.jpg">Lions</a>
<br> <a $id="2" href="#news">Tigers</a> //#news reffer to image address
<br> <a $id="3" href="#news">Bears</a>
<br> <a $id="4" href="#news">Camels</a>
<br> <a $id="5" href="#news">Zebras</a>
<br> <a $id="6" href="#news">Elepahnts</a>
<script>
window.addEventListener("message",function(e)
{
alert(e.data);
setImage(e.data);
});

function setImage(index)
{
if (index == 1)
{
document.getElementById("RightImage").src = "lion.jpg";
}
if (index == 2)
{
document.getElementById("RightImage").src = "tiger.jpg";
}
if (index == 3)
{
document.getElementById("RightImage").src = "bears.jpg";
}
if (index == 4)
{
document.getElementById("RightImage").src = "camels.jpg";
}
if (index == 5)
{
document.getElementById("RightImage").src = "zebras.jpg";
}
if (index == 6)
{
document.getElementById("RightImage").src = "Elephants.jpg";
}
return;
}
</script>
<img src="wt.gif" id="RightImage" >
<frameset cols="20%,*">
<frame name="LeftFrame" src="left3.html">
<frame name="RightFrame" src="right1.html">
</frameset>
</body>
</html>

//Leave comment if any query

0 0
Add a comment
Know the answer?
Add Answer to:
1) With the partial code below, create a web page that looks like the one below...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • HTML 5 and w3 validated with no errors Please ! 1. Create a Web page like...

    HTML 5 and w3 validated with no errors Please ! 1. Create a Web page like the following. You can use any set of images, but try to preserve the relative positioning of all items as shown below. Address Favorites CST 6305- Welome to the classhOpen To G Google INDEX Home Pag Instructor: Christo Dichev relative Lab Exercise: Positioning absolite What to turn in: Please submit your images together with the html file to Canvas

  • Hi, I am current using flask to run a python web application that currently just allows...

    Hi, I am current using flask to run a python web application that currently just allows users to access a video camera on a localhost. As of now, I need to type python main.py to actually run the project and turn on the localhost. What I want to do is, be able to click a button in HTML, through google chrome, and just run the webcam like that. To sum it up, I want to click a simple button and...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT