I have made a page that grants me access to a lot of nice websites of the web, so I don't have to type in all the links.
I want to use this page for my site www.x3mismusic.eu for a index of all the songs, but since there is no place for a home button, I'd like to make the full page clickable as a link. I made it so that whenever you use shift+x links will be disabled so that you can click trough the buttons. However even though I put a link on the background it doesn't show it and it also doesn't work.
I tried to put a link (anchor tag) around body, create a second wrap with a link and I even tried to use the JavaScript "onclick" tag in the body, but that didn't work like I wanted, because onclick makes me unable to use the button links I created.
I surfed the web for ages but couldn't find any reason or solution for why the link doesn't work. Can someone please help me with making the background clickable as a link, while being able to still activated the button links?
I am not good at formatting code in here so I'll have a jsfiddle link to the code. Here is the link:
http://jsfiddle.net/e5fm5byn/
<a href="http://jsfiddle.net/e5fm5byn/" target="_blank">because it asked me
to input code</a>
Hie there
you should not have multiple id's with same value
and now coming to your question
<html>
<head>
<style type="text/css">
.disableMenu {
pointer-events:none;
}
.x {
background-color:#000;
color:#600;
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
border:3px solid #600;
text-align:center;
float:left;
}
.x:hover {
background-color:#000;
color:#0a0;
padding-left:50px;
padding-right:50px;
padding-top:5px;
padding-bottom:5px;
border:3px solid #0a0;
text-align:center;
float:left;
}
a {
color:#fff;
text-decoration:none;
}
a:hover {
color:#b89200;
text-decoration:none;
}
body {
background:linear-gradient(to bottom right, #123264, #606);
color:#b89200;
width:100%;
height:100%;
position:absolute;
margin:0;
padding:0;
}
#wrapper {
width:100%;
height:100%;
position:absolute;
left:0%;
top:0%;
margin:0;
padding:0;
}
#wrapper2 {
width:100%;
height:100%;
position:absolute;
left:0%;
top:0%;
margin:0;
padding:0;
}
</style>
</head>
<body onkeypress="IEKeyCap()" onclick="myClickEvent(this)">
<div id="wrapper">
<span class="x">
<b>
youtubeX
</b>
</span>
</a>
<a href="http://www.lunagang.nl" target="_blank" title="lunagang">
<span class="x">
<b>
lunagang
</b>
</span>
</a>
<a href="http://www.facebook.com" target="_blank" title="facebook">
<span class="x">
<b>
facebook
</b>
</span>
</a>
<a href="http://46.21.172.161:2222/CMD_LOGIN" target="_blank" title="direct admin">
<span class="x">
<b>
direct admin
</b>
</span>
</a>
<a href="http://46.21.172.161/squirrelmail/src/login.php" target="_blank" title="squirrelmail">
<span class="x">
<b>
squirrelmail
</b>
</span>
</a>
<a href="http://www.runescape.com" target="_blank" title="runescape">
<span class="x">
<b>
runescape
</b>
</span>
</a>
<a href="http://www.google.com" target="_blank" title="google">
<span class="x">
<b>
google
</b>
</span>
</a>
<a href="http://www.x3mismusic.eu" target="_blank" title="x3mis music">
<span class="x">
<b>
x3mis music
</b>
</span>
</a>
<a href="http://www.game-vortex.eu" target="_blank" title="game-vortex">
<span class="x">
<b>
game-vortex
</b>
</span>
</a>
<a href="http://www.outlook.com" target="_blank" title="outlook">
<span class="x">
<b>
outlook
</b>
</span>
</a>
</div>
</body>
<script type="text/javascript">
function NNKeyCap(thisOne) {
if (thisOne.modifiers & Event.SHIFT_MASK) {
if (thisOne.which == 88) {
var x = document.querySelectorAll(".x");
x.forEach(function(element){
element.classList.add("disableMenu");
});
}
}
}
function IEKeyCap() {
if (window.event.shiftKey) {
if (window.event.keyCode == 88) {
var x = document.querySelector("#wrapper");
x.classList.add("disableMenu");
}
}
}
if (navigator.appName == 'Netscape') {
window.captureEvents(Event.KEYPRESS);
window.onKeyPress = NNKeyCap;
}
function myFunction() {
var x = document.querySelector("#wrapper");
x.classList.remove("disableMenu");
}
function myClickEvent(body)
{
var childDiv = body.querySelector('#wrapper');
var hasClass = childDiv.classList.contains('disableMenu');
if(hasClass)
{
document.location = 'http://www.google.com'; <!-- your background link here -->
}
}
</script>
</html>
here I removed the onkeyup="myFunction()" in body tag as it is removing the disableMenu class which is being added by IEKeyCap
and added myClickEvent which checks if #wrapper has class disableMenu
if it has disableMenu then it will be redirected to the link you assigned to document.location
Hope this helps you
Related
So far I have this:
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px">
<i class="fa fa-user-circle"></i>
<i class="fa fa-id-card-o"></i>
<i class="fa fa-folder-open"></i>
</div>
If I enter text into the a tag, the text ends up looking jumbled and doesn't go under the button the way I want it to. How can I fix this?
I made a codepen that should match what you are attempting to do :
Here is the css :
.w3-sidebar {
width: auto;
}
.w3-bar-block .w3-bar-item {
/* Overrides default rule */
text-align: center;
}
.sidebar-icon-label {
display: block;
font-size: 10px;
}
You'll see that I removed the inline style of your w3-sidebar, and set it to "auto" instead, which means it will have the size of its content.
I created a new class for your icon labels, and overrode a native w3 rule to center everything.
Update your code Like this
<style>
i{ width:20px;
height:20px;
display:inline-block; }
a{ float:left; width:100%; text-align:center; }
span{ float:left; width:100%; text-align:center; }
</style>
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge"
style="width:70px">
<i class="fa fa-user-circle"></i><span>Text 1</span>
<i class="fa fa-id-card-o"></i><span>Text 1</span>
<i class="fa fa-folder-open"></i><span>Text 1</span>
</div>
So I have an ambitious idea on something I want to do specifically and want to know the best way to carry it out or if it's even possible.
I want it so when I hover over one of the tabs it plays a gif animation (like some arrow or something) once then leaves it in that last frame (so it doesn't continuously loop then is clickable.
I doubt my code will be any help at all but I'll leave it here anyway (I know it's messy and that I should fix it but I'm sorta new to this.)
<!DOCTYPE html>
<html lang="en-US">
<html>
<style>
head {
background-color: white;
}
span.mainbar {
display: inline-block;
margin-left:10px;
margin-top:3px;
}
span.text {
display: inline-block;
float:right;
margin-right:25px;
margin-top: 27px;
}
span.bar
{
display: inline-block;
float:right;
margin-right:25px;
margin-top: 20px;
}
span.facebook {
display: inline-block;
float:right;
margin-right:30px;
margin-top: 22px;
}
span.instagram{
display: inline-block;
float:right;
margin-right:22px;
margin-top: 22px;
}
span.twitter{
display: inline-block;
float:right;
margin-right:30px;
margin-top: 16px;
}
</style>
<head>
<title> The Project </title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<span class="mainbar">
<a href="Homepage.html">
<img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;">
</a>
</span>
<Span class="twitter">
<a href="https://www.twitter.com"target="_blank">
<img src="images/twitter.png" alt="twitter page"
style="width:50px;height50px:;border:0;">
</a>
</span>
<Span class="instagram">
<a href="https://www.instagram.com"target="_blank">
<img src="images/instagram.png" alt="instagram page" style=";border:0;">
</a>
</span>
<Span class="facebook">
<a href="https://www.facebook.com"target="_blank">
<img src="images/facebook.png" alt="facebook page" style=";border:0;">
</a>
</span>
<span class="bar">
<img src="images/bar.png" alt="bar" style=";border:0;">
</a>
</span>
<span class="text">
<a href="about.html">
<img src="images/about.png" alt="about" style=";border:0;">
</a>
</span>
<span class="text">
<a href="shop.html">
<img src="images/shop.png" alt="shop" style=";border:0;">
</a>
</span>
<span class="text">
<a href="Homepage.html">
<img src="images/home.png" alt="Home" style=";border:0;">
</a>
</span>
</head>
<body>
<hr>
</hr>
</body>
</html>
Tab example pic
All you need to do to make an image clickable is to wrap the image in a hyperlink parent:
<a href="http://www.google.com">
<img src="http://placehold.it/100">
</a>
As for only allowing the link to be clickable after the animation has played, it would theoretically be possible through JavaScript, but I wouldn't recommend that. The only way to do it would be with a timeOut, and you would possibly encounter a state where the timing gets out of sync.
Instead of this, I would recommend using a sprite map instead of a GIF.
Hope this helps! :)
You can't control animated gif without javascript/jquery control.
With 2 image, one static and one animated and control the start of animation with jquery, like this solution: Stop a gif animation onload, on mouseover start the activation
Using jquery plugin like this: http://rubentd.com/gifplayer/
I recently began construction of my first website, I'm still a beginner in html. My site has three buttons on the side, "Games", "Chat", and "About". They all have custom pictures, but it seems like there is a very small hyperlinked "-" in the bottom right of the button. Like a hyperlink, it turns red when clicked. Here is a picture of my clicking the "Games" button: As you can see, there is a small "-" hyperlink on the bottom right of the button.
Here is ALL my code for the games page:
<html>
<header>
<title>CBgames.com</title>
</header>
<body bgcolor=#474747 text=#FFFFFF>
<center>
<img src="siteimages/title.gif">
</center>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/games.html">
<img src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/chat.html">
<img src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" />
</a>
<br>
<a href="file:///C:/Users/user/Desktop/htmlwebsite/about.html">
<img src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" >
</a>
<br>
<br>
<table Align="left" Border="1" Width="300">
<tr>
<td><center>Our Newest Games:</center></TD>
</tr>
<tr>
<td>
<center>Game</center>
<center>Game</center>
<center>Game</center>
</td>
</tr>
</table>
<style type="text/css">
body {
margin:0px;
padding-bottom:25px;
}
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
width:1920px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
bottom:0px;
}
</style>
<head>
<body>
<div id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</div>
</body>
</body>
</html>
I'm still a newbie at this, sorry for any troubles.
This is the syntax for adding a URL in HTML
link text
An example of adding "Example" website URL would be like the following
Click here to direct to Example site
You have spaces between the start tag for the anchor and the image inside of it (and between the image and the end tag).
Spaces are text.
Text in a link gets underlined.
Reformat your HTML to remove the spaces.
There is still an awful lot wrong with your markup but here is a quick attempt of moving you along in the right direction:
<!doctype html>
<html>
<head>
<title>CBgames.com</title>
<style type="text/stylesheet">
BODY {
background-color:#474747;
color:#FFF;
margin:0;
padding-bottom:25px;
}
.titleimage { text-align:center; }
.buttons {
margin-bottom: 2em;
}
.buttons A { display:block; }
.table1 { text-align:left; border:solid 1px #000; width: 300px; }
#footer {
color:white;
font:George, "Times New Roman", Times, serif;
font-size:16px;
height:20px;
line-height:20px;
background-color:#474747;
text-align:center;
position:fixed;
left:0;right:0;bottom:0;
}
</style>
</head>
<body>
<dIv class="titleimage"><img src="siteimages/title.gif"></div>
<div class="buttons">
<a href="games.html"><img
src="siteimages/gamesbutton.gif" onmouseover="this.src='siteimages/mouseovergamesbutton.gif';" onmouseout="this.src='siteimages/gamesbutton.gif'" /></a>
<a href="chat.html"><img
src="siteimages/chatbutton.gif" onmouseover="this.src='siteimages/mouseoverchatbutton.gif';" onmouseout="this.src='siteimages/chatbutton.gif'" /></a>
<a href="about.html"><img
src="siteimages/aboutbutton.gif" onmouseover="this.src='siteimages/mouseoveraboutbutton.gif';" onmouseout="this.src='siteimages/aboutbutton.gif'" ></a>
<div>
<table class="table1">
<tr><td>Our Newest Games:</td></tr>
<tr>
<td>
<div>Game</div>
<div>Game</div>
<div>Game</div>
</td>
</tr>
</table>
<footer id="footer">
COPYRIGHT © 2015 CB-GAMES.NET [SA] - ALL RIGHTS RESERVED
</footer>
</body>
</html>
We are developing application on our iOS,
Inside our html page, there is "Email Results" button. when I click on the button the screen scrolls up immediately.
HTML:
<div class="result-button-wrapper">
<a target="_blank" href="" class="button button-email"><span class="icon"></span>Email Results</a>
</div>
CSS:
.button {
display:inline-block;
padding:12px;
position:relative;
margin:12px;
cursor:pointer;
color:#fff !important;
font-size:16px;
font-weight:bold;
text-decoration:none;
text-shadow:0px 1px 2px #222222;
text-align:center;}
.button.button-email {
display:block;
width:130px;
padding-left:28px;
margin:10px auto 10px auto;}
if I removed the "button" from the class like:
<a target="_blank" href="" class="button-email"><span class="icon"></span>Email Results</a>
, the button works and I can click it
Where is the issue in my CSS.
I notice the class .button does not have a closing bracket. You may want to fix this.
Toggle with the presences of # in the href value. That is href="#". Do not remove "button" from the class when doing this.
EDITED
Using JavaScript, apply javascript:void(0) as the href value.
Example
<div class="result-button-wrapper">
<a target="_blank" href="javascript:void(0)" class="button button-email">
<span class="icon"></span>Email Results
</a>
</div>
Alternatively, you can use jQuery
$('a.button-email').click(function (event) {
event.preventDefault();
});
I suspect I'm doing something stupid but I have some hyperlinks styled as images with css but they don't work as links.
Experimental page is at http://cotswoldplayhouse.co.uk/jm3/index.php/what-s-on
and it's the 'Read more' and 'buy tickets' buttons.
The page is built by php but the html looks like this...
<td>
<div class="sg-read-more">
Find out more
</div>
<div class="sg-book-ticket">
Book Ticket
</div>
</td>
The CSS is this....
div.sg-book-ticket {
display:block;
position:absolute;
background:url(images/buy-ticket.png) no-repeat 0 0;
right:15px;
bottom:2px;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket:hover {
background-position:0 -40px;
}
The images display correctly and the rollover works, but they aren't links.
What have I missed?
I personally would style the link as opposed to the div
div.sg-book-ticket{
position:absolute;
right:15px;
bottom:2px;
}
div.sg-book-ticket > a{
display:block;
background:url(images/buy-ticket.png) no-repeat 0 0;
width:80px;
height:40px;
text-indent:-9999px;
}
div.sg-book-ticket a:hover{
background-position:0 -40px;
}
if you want the whole div to be clickable, use this :
<td>
<a href="#">
<span class="sg-read-more">
</span>
</a>
<a href="http://www.ticketsource.co.uk/event/70577" target="_blank">
<span class="sg-book-ticket">
</span>
</a>
</td>
Can you try the following?:
<a href="<a href="http://www.ticketsource.co.uk/event/70577" target="_blank" alt="book ticket" />
<img src="images/buy-ticket.png" />
</a>
instead of putting the image in the css?