Known Participant

Question

Question about hotspot maps in dreamweaver

Forum|Forum|6 years ago
April 28, 2019
2 replies
1641 views

Hey All.

have a question about hotspot maps, I have used a Jpeg image of a map and use the hotspot tool to highlight areas of the map. I have attempted to link these areas to different pages on my site but it always redirects back to the homepage no matter what image you click.

This topic has been closed for replies.

Nancy OShea

Community Expert

I should also mention that old fashioned image maps are not responsive. You might want to think twice about using a JPG image map for site wide navigation. An ordinary list menu will work well on mobile, tablet & desktops.

How To Create a Responsive Top Navigation Menu

Nancy O'Shea— Product User & Community Expert

mitchellp61824118Author

Known Participant

This map isn't used for navigation, It is just to check a criteria off on my checklist for school work.

Nancy OShea

Community Expert

Did you define a local site folder before you started this project?

Are all the site files and assets saved in your local site folder?

Can you post a link to your problem page online?

Nancy O'Shea— Product User & Community Expert

mitchellp61824118Author

Known Participant

The page isn't hosted but I will give a screenshot of what exactly I mean.

mitchellp61824118Author

Known Participant

<!DOCTYPE html>

<html>

<head>

<title>My Project</title>

</head>

<body>

</div>

mymenu();

</script>

</div>

<background="giraffe0.jpg">

</div>

</div>

</body>

</html>

^^

This code is my "Source Code"

and the following code is what makes all my pages.

function mymenu()

{

document.write('<ul><li><a href="javascript:contactus();">Contact</a></li><li><a href="javascript:about();">About</a></li><li><a href="javascript:Animals();">Animals</a></li><li><a class="active"href="javascript:home();">Home</a></li></ul><ul><li><ul><li><a href="javascript:anotherpage();">What To Do</a></a></li></ul>');

}

function home()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

Click <a href="Voucher.pdf">Here for a link to a free voucher!</a>

<alt="voucher">

</div>

</td>

</tr>

<marquee behavior="scroll" direction="right" scrolldelay="800" scrollamount="50">Welcome to marshall zoo! Please browse our website and check out our new arrivals!

<td>

</map>

<p>We are proudly listed as the 11th best zoo around the world and in the top 2 zoos in the UK as part of the TripAdvisor Travellers Choice Attractions.

During your visit to Marshall Zoo, you will see many species from around the world and can learn more about them at our fantastic daily encounters giving you the chance to see our animals being fed, watch a training session or perhaps just quiz their keepers! </p>

<tr>

</table>`;

}

function Animals()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

<body>

<div class="text"><font size="4">There are only a few hundred of these precious animals left in the wild, so we are doing all we can to stop them becoming extinct.

Sumatran tigers have webbed paws, which means that they are brilliant swimmers. Explore that Sumatra in Islands and you could see mother and daughter, Kirana and Kasarna, splashing around in the pool or sunbathing on the rocks.

Sumatran tigers are the smallest of all tigers and their low stance lets them creep up on prey unseen. Their stripes are narrower and closer together than those of other tigers.</font></div>

</a>

</div>

</div>

<div class="text"><font size="4">Iblis, our nine year old male, is an important part of the European Endangered Species Breeding Programme. This is a carefully managed scheme overseeing the breeding of zoo animals in different countries.

You can find our pride of three beautiful lions, Iblis, Kiburi and Kumari next to The Oakfield. Lions enjoy relaxing and lazing around, they spend between 16 and 20 hours each day resting and sleeping. They have few sweat glands so they wisely tend to conserve their energy by resting during the day to conserve their energy at night for when it is cooler.

The Asiatic lion is listed as endangered on the International Union for the Conservation of Nature (IUCN) Red list. </div>

</a>

</div>

</div>

<div class="text"><font size="4">Reflecting the 'heartland' of India, these swampy flood plains are home to one of the two species of rhino that can be found at Marshall Zoo; here you can find the greater one-horned rhino. These magnificent prehistoric-looking animals enjoy regular dips in the muddy pool, galloping around or grazing on the grasslands.

Just around the corner, over Elephant Bridge, you will also be able to spot two other Asian species exploring their sandy plains and the onager, which is related to the donkey, and the Bactrian camel. Both of these animals are critically endangered in the wild.</div>

</div>

</a>

</div>

</body>

</td>

</tr>

</table>`;

}

function about()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

Our mission is to conserve biodiversity and other natural resources, both locally and internationally but we rely on the support of thousands to bring it to life!

We engage with over 40,000 children and young people through our conservation educational programmes, and welcome over 500,000 visitors each year to our 140 acre zoological park. In every contact we seek to encourage understanding, and inspire care for the natural world. In essence, we aim to connect people with nature.

Our team of Conservation Biologists run field programmes in the UK & Africa in partnership with communities, statutory agencies and other non-governmental organizations. Find out which species we are working with and the positive, sustainable impacts we are making on our conservation website.

</textarea>

<tr>

<html>

<head><title>Javascript</title>

.hide{

display: none;

}

#timediv {

background: #fff;

text-align: center;

width: 148px;

color: #000;

border: 1px #ccc groove;

position: relative;

top: -60px;

right: -208px;

}

.body_time{

background: #17c8e8;

padding: 100px;

width: 58px;

border-radius: 50%;

margin: 15% auto;

}

.anim{

}

</style>

</head>

</td>

</tr>

</table>`;

}

var interval = setInterval(timestamphome, 1000);

function timestamphome(){

var date;

date = new Date();

var time = document.getElementById('timediv');

time.innerHTML = date.toLocaleTimeString();

}

function contactus()

{

document.getElementById('content').innerHTML = `<table>

<tr>

<td>

<marquee behavior="scroll" direction="right" scrolldelay="800" scrollamount="60">Welcome to our contact page where you can find our social media links and our contact form.

<tr>

<td>

<tbody>

<tr>

</p>

<p>

<label for="textfield2">Address:</label>

</p>

<p>

<label for="textfield3">Home Number:</label>

Preferred method of contact

</p>

<p>

<label for="textfield4">Mobile Number:</label>

Preferred method of contact </p>

<p>

<label for="textfield5">Email Addresss:</label>

Preferred method of contact </p>

<p>Please Give us a reason for contacting us today-</p>

<p>

General Enquiry

Season Ticket

Adoption of an animal

Gifts & Zoo Experiences

Funding / Donate to us </p>

<p>

<label for="textarea">Your Enquiry<br>

</label>

</p>

<p>We wish your visit to be a pleasant one, please use the box below to tell us how we did today. </p>

<p>

<label for="textarea2">Any Comments?<br>

</label>

<textarea name="textarea2" cols="30"

rows="5 id="textarea2"></textarea>

</p>

<p>

</p></td>

</tr>

</tbody>

</table>

<tr>

<td>

<html>

<head><title>Javascript</title>

.hide{

display: none;

}

#timediv {

background: #fff;

text-align: center;

width: 148px;

color: #000;

border: 1px #ccc groove;

position: relative;

top: -60px;

right: -208px;

}

.body_time{

background: #17c8e8;

padding: 100px;

width: 58px;

border-radius: 50%;

margin: 15% auto;

}

.anim{

}

</style>

</head>

</form>

</div>

</td>

</tr>

</table>`;

}

var interval = setInterval(timestamphome, 1000);

function timestamphome(){

var date;

date = new Date();

var time = document.getElementById('timediv');

time.innerHTML = date.toLocaleTimeString();

}

body, table

{

width:100%;

}

#wrapper

{

width:90%;

margin:auto;

}

#content

{

border-radius: 0px 0px 10px 10px;

background-color: grey;

width: inherit;

}

.menu

{

width: inherit;

}

ul

{

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

height:45px;

}

li {

float: right;

}

li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

li a:hover {

background-color: #333;

}

.img-container{width:33%;float:left; margin: 2px;}

.img-container img{height: 400px; }

.container {

position: relative;

width: 100%;

max-width: 400px;

}

.image {

width: 80%;

height: auto;

}

.overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 100%;

width: 100%;

opacity: 0;

transition: .8s ease;

background-color: #008080;

}

.container:hover .overlay {

opacity: 1;

}

.icon {

color: white;

font-size: 100px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

text-align: center;

}

.fa-user:hover {

color: blue;

}

.container {

position: relative;

width: 100%;

max-width: 400px;

}

.image {

width: 100%;

height: auto;

}

.overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 100%;

width: 100%;

opacity: 0;

transition: .8s ease;

background-color: #008080;

}

.container:hover .overlay {

opacity: 1;

cursor:pointer;

}

.icon {

color: white;

font-size: 100px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

text-align: center;

}

.fa-user:hover {

color: blue;

}

.container {

position: relative;

width: 100%;

max-width: 400px;

}

.image {

width: 100%;

height: 100%;

}

.overlay {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

height: 100%;

width: 100%;

opacity: 0;

transition: .8s ease;

background-color: #008080;

}

.container:hover .overlay {

opacity: 1;

}

.icon {

color: white;

font-size: 100px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

text-align: center;

}

.fa-user:hover {

color: blue;

}

input[type=text], select, textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

margin-top: 6px;

margin-bottom: 16px;

resize: vertical /

}

input[type=submit] {

background-color: #4CAF50;

color: White;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #45a049;

}

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

}

* {box-sizing: border-box;}

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}

.topnav a {

float: left;

display: block;

color: black;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #2196F3;

color: white;

}

.topnav .search-container {

float: right;

}

.topnav input[type=text] {

padding: 6px;

margin-top: 8px;

font-size: 17px;

border: none;

}

.topnav .search-container button {

float: right;

padding: 6px;

margin-top: 8px;

margin-right: 16px;

background: #ddd;

font-size: 17px;

border: none;

cursor: pointer;

}

.topnav .search-container button:hover {

background: #ccc;

}

@media screen and (max-width: 600px) {

.topnav .search-container {

float: none;

}

.topnav a, .topnav input[type=text], .topnav .search-container button {

float: none;

display: block;

text-align: left;

width: 100%;

margin: 0;

padding: 14px;

}

.topnav input[type=text] {

border: 1px solid #ccc;

}

<style>

.fa {

padding: 20px;

font-size: 30px;

width: 50px;

text-align: center;

text-decoration: none;

margin: 5px 2px;

}

.fa:hover {

opacity: 0.6;

}

.fa-facebook {

background: #3B5998;

color: white;

border-radius:50%;

text-align: center;

font-size: 30px;

padding: 20px;

}

.fa-twitter {

background: #55ACEE;

color: white;

text-align: center;

border-radius:50%;

font-size: 30px;

padding: 20px

}

@import "compass";

$mainColor: #1bbccb; // Blue

//$mainColor: #de9235; // Orange

//$bgColor: darken($mainColor, 25%);

$bgColor: #215769;

$greyColor: #2a2a2a;

$textColor: White;

$fontClock: "Open Sans";

$fontCaptions: "Source Sans Pro";

body {

padding: 0;

margin: 0;

background-color: #222;

overflow: hidden;

}

svg {

position: absolute;

width: 800px;

height: 480px;

left: 0; right: 0; top: 0; bottom: 0;

margin: auto;

@include background-image(linear-gradient(Black 60%, $bgColor 100%));

@include border-radius(10px);

@include box-shadow(0 0 50px rgba(Black, 0.8));

}

.bgDot {

stroke: none;

fill: $bgColor;

}

.clockCircle {

fill: none;

stroke: $greyColor;

}

.clockArc {

fill: none;

stroke: $mainColor;

}

.clockDot {

fill: lighten($mainColor, 50%);

}

.caption {

font-family: $fontCaptions;

font-weight: 300;

fill: $textColor;

}

.dayText {

font-size: 1.7rem;

}

.dateText {

font-size: 2.5rem;

font-weight: 400;

}

.timeText {

font-family: $fontClock;

font-size: 5rem;

font-weight: 600;

fill: $textColor;

}

</style>

</head>

<body>

^^

And this is my "styles.css" sheet.

Thanks for all the help so far guys, appreciate it.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded