Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
The page isn't hosted but I will give a screenshot of what exactly I mean.
Copy link to clipboard
Copied
When you click the images, It doesn't redirect you to the page I have told it to just essentially refreshes the page.
Copy link to clipboard
Copied
Without seeing the code, it's pretty hard to debug a page.
Copy and paste the entire code of the page, and any external stylesheets or scripts, to the forum and one of the contributors here should be able to show you where it's going wrong.
Don't use email to reply, code won't come through.
Copy link to clipboard
Copied
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>
</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>
<img src="ZOO MAP.png" alt="zoomap" height="340" usemap="#Map"title="Map"/>
<map name="Map">
<area shape="rect" coords="106,168,148,215" href="animals.html">
<area shape="rect" coords="7,234,137,301" href="Home.html">
<area shape="rect" coords="218,310,272,368" href="animals.html">
<area shape="rect" coords="186,190,261,256" href="home.html">
<area shape="rect" coords="383,209,433,267" href="contact.html">
<area shape="rect" coords="481,272,526,319" href="animals.html">
<area shape="rect" coords="558,291,605,339" href="What To Do.html">
<area shape="rect" coords="439,365,482,414" href="About.html">
<area shape="rect" coords="517,369,564,418" href="About.html">
<area shape="rect" coords="203,120,245,167" href="Animals.html">
<area shape="rect" coords="38,331,88,392" href="What To Do.html">
<area shape="rect" coords="264,156,313,217" href="What To Do.html">
<area shape="rect" coords="247,73,293,129" href="Contact.html">
</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>`;
}
Let me know if you need anything else. Thanks for the help.
Copy link to clipboard
Copied
As an FYI, Home.html is not the same as home.html. Most web servers are cAsE sEnSiTiVe.
Do not use special characters or spaces in files names. What To Do.html should be renamed with hyphens or underscores between words. And camel case naming conventions could mess you up later. My advice is to stick with all small case letters. Example, what_to_do.html
Copy link to clipboard
Copied
I have edited the capitals on the code but it still doesn't work.
Copy link to clipboard
Copied
Did you add actual page links to your hotspots or are they just pound signs?
Copy link to clipboard
Copied
<img src="ZOO MAP.png" alt="zoomap" height="340" usemap="#Map"title="Map"/>
<map name="Map">
<area shape="rect" coords="106,168,148,215" href="animals.html">
^^ for example the href is the "link" im talking about, I just want the user to be able to click the image on the map and be taking to a different page on the site.
Copy link to clipboard
Copied
You have a fair number of structural errors just in the snippet you've posted above.
Run your page through the validation tool under File > Validate > Validate Current Document W3C or go to http://validarot.w3.org/nu to get a listing of the issues in your html.
Cleaning up your code errors will likely take care of the functionality problems you're seeing.
Copy link to clipboard
Copied
I have done as instructed and these are the errors I have received but im not sure about how to go about fixing them.
Copy link to clipboard
Copied
Looks like you have two opening <body> tags. You can only have one <body> </body> tagset in a page. That will cause all kinds of problems further down the code. Judging by the all-orange appearance of the block of code in your last screen shot, you have some other errors that DW doesn't know what to do with and it's causing the code coloring to fail.
If you can upload the page to a test location on a server you control, and share a link to it here, the contributors of this forum would be able to help guide you through the issues much more quickly. If you can't upload to a test location, copy and paste all of the code from the page here so we can take a look. Don't use email, the code won't come through.
Copy link to clipboard
Copied
Ok thank you for your help, I have deleted all the other <body> tags on the pages beside 1. Where can I upload the file any suggested test locations?
Copy link to clipboard
Copied
<!DOCTYPE html>
<html>
<head>
<title>My Project</title>
<script src="menu.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="wrapper">
<div "class"='menu'>
<div style='float:left;'>
<img src="Marshall Zoo Logo.png" width="140px" alt="zoo logo" height="60px">
</div>
<div style="text-align:right;">
<script>
mymenu();
</script>
</div>
</div>
<div id='content'>
<script>home();</script>
<background="giraffe0.jpg">
</div>
<header> </header>
</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>
</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>
<img src="ZOO MAP.png" alt="zoomap" height="340" usemap="#Map"title="Map"/>
<map name="Map">
<area shape="rect" coords="106,168,148,215" href="animals.html">
<area shape="rect" coords="7,234,137,301" href="home.html">
<area shape="rect" coords="218,310,272,368" href="animals.html">
<area shape="rect" coords="186,190,261,256" href="home.html">
<area shape="rect" coords="383,209,433,267" href="contact.html">
<area shape="rect" coords="481,272,526,319" href="animals.html">
<area shape="rect" coords="558,291,605,339" href="what to do.html">
<area shape="rect" coords="439,365,482,414" href="about.html">
<area shape="rect" coords="517,369,564,418" href="about.html">
<area shape="rect" coords="203,120,245,167" href="animals.html">
<area shape="rect" coords="38,331,88,392" href="what to do.html">
<area shape="rect" coords="264,156,313,217" href="what to do.html">
<area shape="rect" coords="247,73,293,129" href="contact.html">
</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>
<!-- Add icon library -->
<div class="img-container">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="Tiger_Hero.jpg" alt="Tiger" style="width:100%" class="image">
<div class="overlay">
<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><!-- img container -->
<div class="img-container">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<img src="lion-face.jpg" alt="Lion" style="width:100%" class="image">
<div class="overlay">
<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><!-- img container -->
<div class="img-container">
<div class="container">
<img src="Rhino.Jpg" alt="Rhino" style="width:100%" class="image">
<div class="overlay">
<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>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</a>
</div><!-- img container -->
</body>
</td>
</tr>
</table>`;
}
function about()
{
document.getElementById('content').innerHTML = `<table>
<tr>
<td>
<textarea rows="4" cols="50">
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>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head><title>Javascript</title>
<style type="text/css">
.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>
<body onload="">
<div class="anim"></div>
<div class="body_" id="body_"><div id="timediv"></div></div>
<script src="script.js"></script>
</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>
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<a href="https://en-gb.facebook.com/" class="fa fa-facebook"></a>
<a href="https://twitter.com/?lang=en-gb" class="fa fa-twitter"></a>
<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>
<td width="210" height="23"><p>
<label for="textfield">Name:</label>
<input name="textfield" type="text" id="textfield" size="30" maxlength="100">
</p>
<p>
<label for="textfield2">Address:</label>
<input name="textfield2" type="text" id="textfield2" size="10">
</p>
<p>
<label for="textfield3">Home Number:</label>
<input name="textfield3" type="text" id="textfield3" size="10">
<input type="checkbox" name="checkbox" id="checkbox">
Preferred method of contact
</p>
<p>
<label for="textfield4">Mobile Number:</label>
<input name="textfield4" type="text" id="textfield4" size="10">
<input type="checkbox" name="checkbox2" id="checkbox2">
Preferred method of contact </p>
<p>
<label for="textfield5">Email Addresss:</label>
<input name="textfield5" type="text" id="textfield5" size="20">
<input type="checkbox" name="checkbox3" id="checkbox3">
Preferred method of contact </p>
<p>Please Give us a reason for contacting us today-</p>
<p>
<input type="checkbox" name="checkbox4" id="checkbox4">
General Enquiry
<input type="checkbox" name="checkbox5" id="checkbox5">
Season Ticket
<input type="checkbox" name="checkbox6" id="checkbox6">
Adoption of an animal
<input type="checkbox" name="checkbox7" id="checkbox7">
Gifts & Zoo Experiences
<input type="checkbox" name="checkbox8" id="checkbox8">
Funding / Donate to us </p>
<p>
<label for="textarea">Your Enquiry<br>
</label>
<textarea name="textarea" cols="30" rows="5"id="textarea"></textarea>
</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>
<input type="submit" name="submit" id="submit" value="Submit">
<input type="reset" name="reset" id="reset" value="Cancel">
</p></td>
</tr>
</tbody>
</table>
<tr>
<td>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head><title>Javascript</title>
<style type="text/css">
.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>
<body onload="">
<div class="anim"></div>
<div class="body_" id="body_"><div id="timediv"></div></div>
<script src="script.js"></script>
</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();
}
Copy link to clipboard
Copied
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;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,80...
$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.
Copy link to clipboard
Copied
Your code is a ttrain wreck. Review HTML fundamentals.
Copy link to clipboard
Copied
yeah im really inexperienced.
Copy link to clipboard
Copied
You must learn the fundamental document structure. Right now your code is all over the place.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
This map isn't used for navigation, It is just to check a criteria off on my checklist for school work.