CODEWITHSUNDEEP
htmlcssdreamweaver
stack overflow
stack overflow

Reputation: 1

Click on a div Tag and Make it open another page/html file

I am having trouble getting a div tag to open another page/local html file when it is clicked.

I have a menu which consists of 5 buttons (div's) These buttons have a background image instead of a color because dream weaver doesn't have the font. Each button also has a hover over feature which changes the div to display an inverted image.

After googling how to make a whole div clickable and then for it to open the next page (local file) none of the methods has worked for me.

What i want to do for example is for when the "productsbutton" div is clicked the local html file called "Products.html" to open and display the content on that page.

My Source code is:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/design.css" rel="stylesheet" type="text/css">


<div id="wrapper">

  <div id="header"></div>

  <div id="menu">

    <div id="homebutton"></div>
    <div id="Productsbutton"></div>    
    <div id="Gallerybutton"></div>
    <div id="Menubutton"></div>
   <div id="Aboutbutton"></div>

  </div>

And my CSS is 

@charset "utf-8";
/* CSS Document */
body{
    background-image:url(/Images/background.jpg);
    background-repeat: no-repeat;  
    Width:1400px;
    height:1400px;
}

#wrapper{
    Width:1000px;
    Height:1400px;
    margin-left:auto;
    margin-right:auto;
    padding:5px;
}


 #header{
     width:1000px;
     height:250px;
    background-image:url(/Images/banner.png);
}

#menu{
    width:1000px;
    height:35px;
    background-color:#1790e1;
    border-radius:5px;
}

   #homebutton{
    width:200px;
     height:35px;
      background-image:url(/Images/Menu_Buttons/Home%20Button.png);
     float:left;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease; 
     -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      border-bottom-left-radius:5px;
}

  #homebutton:hover{
background-image:url(/Images/Menu_Buttons/Home%20Button%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
}

#Aboutbutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/About.png);
border-bottom-right-radius:5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

#Aboutbutton:hover{
background-image:url(/Images/Menu_Buttons/About%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
border-bottom-right-radius:5px;
}

 #Gallerybutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/Gallery.png);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 }

 #Gallerybutton:hover{
background-image:url(/Images/Menu_Buttons/Gallery%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
}

 #Menubutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/Services.png);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

#Menubutton:hover{
background-image:url(/Images/Menu_Buttons/Services%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
}

#Productsbutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/Products.png);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 color:#000000;

}

#Productsbutton:hover{
background-image:url(/Images/Menu_Buttons/Products%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
 }

Upvotes: 0

Views: 8915

Answers (4)

Magnetron
Magnetron

Reputation: 377

To keep this solution strictly to html, I believe the answer should be to wrap an a href tag around the div.

<a href="Products.html">
    <div id="Productsbutton">Products</div>
</a>

Final version of your html file:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="CSS/design.css" rel="stylesheet" type="text/css">

    <div id="wrapper">
      <div id="header"></div>
        <div id="menu">

        <div id="homebutton">awdwa</div>
        <a href="Products.html">
          <div id="Productsbutton">Products</div>   
        </a>
        <div id="Gallerybutton">bbbb</div>
        <div id="Menubutton">ccc</div>
        <div id="Aboutbutton">ddd</div>

      </div>
    </div>
  </head>
</html>

Upvotes: 1

Sujan Gainju
Sujan Gainju

Reputation: 4769

You should use cursor: pointer; for each clickable div to let users know it is clickable.

Then you should call onclick() even in each div to trigger the click and open respective page.

<div id="homebutton" onclick="openPage('Home.html')"> </div>

and in JS file,

 function openPage(pageUrl){
       window.open(pageUrl);
     }

For mode detail on how to open the page on another tab, here is the link to W3Schools

Upvotes: 2

rashidnk
rashidnk

Reputation: 4292

<div id="Productsbutton" onclick="nav('Products.html')">Products</div>


function nav(page) {   
  window.location.href=page
}

Upvotes: 0

Uday Kumar
Uday Kumar

Reputation: 54

u can do it by adding in your id

       #homebutton{


      cursor: pointer;
}

OR

<a id="homebutton" href="#"></a>

Upvotes: 0

Related Questions