Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Novice - Help with image that I want to turn into something hoverable/clickable


  • Please log in to reply
8 replies to this topic

#1 yaafin

yaafin

  • Members
  • 5 posts
  • OFFLINE
  •  
  • Local time:08:59 PM

Posted 15 August 2014 - 10:16 PM

Hi all,

I'm new to HTML & programming in general. I want to recreate the image that I've attached, into clickable links and hoverable. For example, I want to be able to hover over "confiscated", and for it to be clickable, if I click it, it would take to a different page. No idea where to start, and how to do it. Any advice/suggestions?
 
I saw this during reading a news site, and as part of learning html/css/javascript, decided to attempt to turn it into something clickable/hoverable, but didn't get far! Hence why I'm here. Not asking for codes, but to give me an idea of how it would be done.
 
Basically I'm looking to do a page about myself as practice. So it would have my about details, arranged in a circle like that. So hobbies/interests/education/contact etc And then if you click it, would take to each seperate page. It's basically menu's arranged in a circle.

 

Thanks


20kx185.jpg


Edited by yaafin, 15 August 2014 - 10:17 PM.


BC AdBot (Login to Remove)

 


#2 kylejw1990

kylejw1990

  • Members
  • 171 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Michigan, United States
  • Local time:02:59 PM

Posted 15 August 2014 - 10:29 PM

image mapping with html. 

 

links:

  1. http://stackoverflow.com/questions/10502309/setting-a-cursor-with-css-on-an-image-map-area
  2. http://www.w3schools.com/tags/att_area_coords.asp  (use this to even play with the code "try it yourself option)

i know some html and css so feel fell to PM if you need help. 

 

-kyle


Edited by kylejw1990, 15 August 2014 - 10:31 PM.


#3 yaafin

yaafin
  • Topic Starter

  • Members
  • 5 posts
  • OFFLINE
  •  
  • Local time:08:59 PM

Posted 16 August 2014 - 07:49 AM

image mapping with html. 

 

links:

  1. http://stackoverflow.com/questions/10502309/setting-a-cursor-with-css-on-an-image-map-area
  2. http://www.w3schools.com/tags/att_area_coords.asp  (use this to even play with the code "try it yourself option)

i know some html and css so feel fell to PM if you need help. 

 

-kyle

 

Thanks.

 

I will give the image mapping a try, and if I struggle, will pm you.

 

As for the image itself, any ideas for how I will put it up on the site, without being particular experienced with image editors such as photoshop? What's the easiest way?

 

Cheers



#4 yaafin

yaafin
  • Topic Starter

  • Members
  • 5 posts
  • OFFLINE
  •  
  • Local time:08:59 PM

Posted 16 August 2014 - 08:03 AM

image mapping with html. 

 

links:

  1. http://stackoverflow.com/questions/10502309/setting-a-cursor-with-css-on-an-image-map-area
  2. http://www.w3schools.com/tags/att_area_coords.asp  (use this to even play with the code "try it yourself option)

i know some html and css so feel fell to PM if you need help. 

 

-kyle

 

This works for clicking on different parts of an image, but I also want to make the image parts hoverable. Basically it should be like a circular menu, rather than horizonal/vertical.



#5 kylejw1990

kylejw1990

  • Members
  • 171 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Michigan, United States
  • Local time:02:59 PM

Posted 16 August 2014 - 04:38 PM

try something along the lines of "imap using css"



#6 kylejw1990

kylejw1990

  • Members
  • 171 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Michigan, United States
  • Local time:02:59 PM

Posted 16 August 2014 - 05:16 PM

 

<html>

   <style>
   </style>
   <body>
      <map name = "menu_map">
         <area shape = "poly" coords = "55,222,90,200,76,163,35,167" title= "Google" href="http:\\google.com" >
      </map>
      <img src="20kx185.jpg" usemap="#menu_map" />
   </body>
</html>

tell me if this is closer... 

 

note run the page in the same place as the pic...

 

also the image map is over the "raided" option...(bottom left) let the cursor hover for a moment as well


Edited by kylejw1990, 16 August 2014 - 05:21 PM.


#7 kokomodrums

kokomodrums

  • Members
  • 202 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Indiana
  • Local time:02:59 PM

Posted 19 August 2014 - 03:28 PM

This is a fairly complicated task for a beginner, perhaps you should start smaller and work on fundamentals? Also, if this type of design is what you're interested in learning, you might want to look into learning jquery, which a ton of web developers use to create flashy, interactive designs like what you're suggesting.

 

There are a lot of great books out there for learning web development, I'm a fan of the Head First series, especially for beginners. Just a thought.


-- Matt


#8 yaafin

yaafin
  • Topic Starter

  • Members
  • 5 posts
  • OFFLINE
  •  
  • Local time:08:59 PM

Posted 26 August 2014 - 01:25 PM

kylejw1990 - Yes thanks. It was a good idea to mention maps, I went off and learned about it. I will move on to more advanced options, but for now, as a beginner, I will stick to the simple things.

 

 

kokomodrums - Thanks. I agree it's complicated for a beginner. I did work on the fundamentals, which I now understand.

#9 yaafin

yaafin
  • Topic Starter

  • Members
  • 5 posts
  • OFFLINE
  •  
  • Local time:08:59 PM

Posted 26 August 2014 - 01:27 PM

Any help would be appreciated. I'm stuck on this code. Basically when you hover over the navigation/menu, the circles are supposed to turn, it's not working.

 

Here is the code:

<!DOCTYPE html>
<html>
<head>

<title>MySite</title>

<meta name ="description" content = "Programming">
<meta name ="keywords" content = "HTML,CSS,JavaScript">
<meta name = "author"  content = "Name">
<meta charset="UTF-8"> 

<link rel="stylesheet" type="text/css" media="screen" href="css/mystyle.css"/>
<script src="js/myScript.js"></script>
<!-- <base href="webprog/images/" target="_blank"> -->

</head>
 
<body>

<div id="page-container">
 

    <div id="main-nav">
   
	   <li id = "one"><a href="hobbies.html">Hobbies</a></li>
     <li id="two"><a href="education.html" class="two">Education</a></li>
     <li id="three"><a href="travel.html" class="three">Travel</a></li>
	  <li id="four"><a href="contact.html" class="four">Contact</a></li>
	  
	    </div>
<div class="wrapper">
      <div class="circle">
        <ul>
		 
         
         <li><img src="images/hobbies.png" width="50px" height="50px"></li>
		   <li><img src="images/education.png" width="50px" height="50px"></li>
          <li><img src="images/travel.png" width="50px" height="50px"></li>
          <li><img src="images/contact.png" width="50px" height="50px"></li>
		  
		
        </ul>
      </div>
 </div>

  
  

   <div id="footer">Name &copy; 2014</div>
    </div>
</body>
</html>
@media handheld{


}

html, body {
	    margin: 0;
	    padding: 0;
		-webkit-backface-visibility: hidden;
}

body{

font-family: Arial, Helvetica, sans-serif;
font-size:1em;
color: #ffffff;
line-height: 1em;
height: 100%;
width: 100%;
background: #ffffff url("../images/background.jpg");

	-webkit-background-size: cover;	-moz-background-size: cover; -o-background-size: cover;	background-size: cover;
}

.hidden {

display:none;

}

#page-container {

width:780px;
margin:auto;

}
#main-nav {
		border:1px solid #ccc;
			border-width:1px 0;
			list-style:none;
			margin:10px;
			padding:10px;
			text-align:center;
	
	}
	
#main-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#main-nav li {

display:inline;

}

#main-nav a {
  
  display:inline-block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    padding: 10px;
	margin:10px;
    text-decoration: none;
    text-transform: uppercase;

}
	
#main-nav a:hover, a:active {
    background-color: #7A991A;
}

#content {

color:#ffffFF; 
border:5px outset #efef00;
width: 600px; 
margin:20px auto; 
padding:50px;
text-align:justify;


}

#content ul {

line-height:20px;

}

#content li {

font-family:"Courier New", Courier, monospace;

}
	
#h1 {

margin:0;
padding:10px;
color: #eee;
font: 50px/80px "Comic Sans MS", cursive, sans-serif; 


}

#h4 {
 text-shadow: 2px 2px 2px #0000ff;
font: 20px/40px "Lucida Console", Monaco, monospace; 


}

#contactLinks  a{

 color: #c9c9c9;
text-decoration: none;

}

#contactLinks a:hover {

color:#db6d16;
}


	
#footer {
		 margin:auto;
		padding:1px;
		font-size: 0.7em;
		border:3px ridge #bbb;
		width:878px;
		text-align: right;
		color:#c9c9c9;
	}
	
#greeting {
		 margin:auto;
		padding:1px;
		font-size: 1em;
	width:130px;
		color:#c9c9c9;
	}

/*HEADER*/
.header {
  height: 25px;
  background: #222;
  color: #eee;
  text-align: center;
  font: 10px/25px Helvetica, Verdana, sans-serif; 
}

.header a {
  color: #999;
}

/*WRAPPER*/
.wrapper {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 780px;
}

.menu a {
  margin-right: -4px;
  padding: 10px 30px;
  width: 50px;
  color: #333;
  text-decoration: none;
  font: 15px/25px Helvetica, Arial, sans-serif;
}

.menu a:hover {
  background: #eee;
}

/*INNER CIRCLE*/
.wrapper:before {
  content: "E.I";
  text-align: center;
  font: 50px/100px Georgia, Times, serif;
  color: #ff0000;
  position: absolute;
  margin: 150px 340px ;
  

  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #fff;

  -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
}

/*MAIN CIRCLE*/
.circle {
  position: relative;
 margin:50px auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;


  box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);
  -webkit-box-shadow: inset 0px 0px 30px rgba(0,0,0,0.3);

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/*LITTLE CIRCLES*/
.circle li {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  list-style-type: none;
  text-align: center;
  font: 20px/50px Helvetica, Arial, sans-serif;
  top: 0;
  left: 0;
}

.circle li:nth-child(1) {
  top: 15px;
  left: 125px;
}

.circle li:nth-child(2) {
  top: 125px;
  left: 235px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.circle li:nth-child(3) {
  top: 235px;
  left: 125px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.circle li:nth-child(4) {
  top: 125px;
  left: 15px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}
/*HOVER STATES*/
#main-nav> #one:hover ~ .wrapper.circle {
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
}

#main-nav> #two:hover  .circle {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#main-nav> #three:hover ~ .wrapper {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

#main-nav > #four:hover ~.circle {
  -webkit-transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  -o-transform: rotate(-270deg);
  transform: rotate(-270deg);
}









0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users