Was looking into this issue for more than an hour, need your help guys, nothing I could find on internet. I want that when on mouse over the image changed to text like "home" and on mouse out it would change back to the image. But the webpage has multiple links on nav bar for example - Home/About/Contact...
nav {
font-size: 40px;
}
nav:hover {
content: "home"
}
<!DOCTYPE html>
<html>
<head>
<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">
</head>
<body>
<nav>
</nav>
</body>
</html>
You can use nav:hover::after as the selector for the text (i.e. a pseudo-element), with position: absolute and a white background to cover/hide the icon (and position: relative on the nav element itself to make it the anchor for the absolute position)
nav {
font-size: 40px;
position: relative;
}
nav:hover:after {
content: "home";
position: absolute;
top: 0;
left: 0;
background: #fff;
}
<head>
<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">
</head>
<body>
<nav>
</nav>
</body>
This is a simpler and cleaner approach to the task: it involves showing and hiding different elements instead to edit an element type and format on runtime:
HTML
<!DOCTYPE html>
<html>
<head>
<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">
</head>
<body>
<nav>
<span>text</span>
</nav>
</body>
</html>
CSS
nav {
font-size: 40px;
}
nav span {
display: none;
}
nav:hover a {
display: none;
}
nav:hover span {
display: inline-block;
}
https://jsfiddle.net/b2ycwjtu/
by the way... ?
nav { font-size: 40px }
nav span { display: none }
nav:hover span { display:inline }
<head>
<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">
</head>
<body>
<nav>
<span>HOME</span>
</nav>
</body>
As you can probably tell CSS is the way to go for this, but that being said if you wanted to do it with javascript you could use something like this:
HTML
<html>
<head>
<title>Image/Text Switching</title>
</head>
<div>
<h1>
Image/Text Switching
</h1>
<div>
<div id="container">
<img id="imgToReplace" src="https://via.placeholder.com/150"/>
<div id="textContainer"></div>
</div>
</div>
</div>
</html>
JS
var replacementText = "Home";
var imgElement = document.getElementById('imgToReplace');
var textContent = document.createTextNode(replacementText);
var textContainer = document.getElementById('textContainer');
var container = document.getElementById('container');
container.addEventListener("mouseover", function(){
imgElement.style.display = "none";
textContainer.appendChild(textContent);
});
container.addEventListener("mouseout", function(){
imgElement.style.display = "unset";
textContainer.innerHTML = "";
});
CSS
#container{
border: 1px solid black;
display: inline-block;
min-height: 150px;
min-width: 150px;
}
One caveat with this approach is that the #textContainer element and the #imgToReplace element must be the same height and width. If you do decide to go this route maybe use some js to set the height and width of the created #textContainer element.
The fiddle can be found here.
Related
I'm new to this topic and I have an index.html file and there I want to use three.js
this is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
</div>
</body>
</html>
I also try this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" href="./style.css"></link>
</head>
<body>
<canvas class="webgl"></canvas>
<script src="../libs/three.js"></script>
<script src="../libs/three.min.js"></script>
<script src="../libs/stats.min.js"></script>
<script src="../libs/OrbitControls.js"></script>
<script type="module" src="./main.js"></script>
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
</body>
</html>
and my css file :
* {
margin: 0;
padding: 0;
}
html,
body {
overflow: hidden;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
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: #04aa6d;
color: white;
}
.webgl {
position: fixed;
top: 0;
left: 0;
outline: none;
}
My problem is that div for menubar didn't show in front of the canvas.
what should I do?
Thanks.
Transform your HTML into something like below:
<div class="topnav">
<a class="active" href="#File">File</a>
Edit
View
About
</div>
<canvas class="webgl"></canvas>
<!-- script tags -->
then remove position, left and top properties from webgl class.
Sorry for the basic question I have this problem when im trying to display my background image using background-image:url() on the css but unfortunately it doesnt work and when i use the content:url(); it works.
And also background-image also works with a url image location from the internet. I have tried everything and research a lot but still no luck. Sorry for the newbie question.
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('./images/Logo.png');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<header>
<div class="logo">
</div>
<nav>
<ul class="nav-ul">
<li> <a href="#">Homes</li>
<li> <a href="#">About</li>
<li><a href="#">Shop</li>
</ul>
</nav>
<a class="nav-button" href="#"></a><button>Login</button>
</header>
It works now. I added property background-size: contain;
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('./images/Logo.png');
background-size: contain;
}
You were missing the <body> tag.
(Its a good job you're not a mortician.)
*{
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #e2dfe3;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
cursor: pointer;
background-image: url('https://dummyimage.com/80x80/000/fff');
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>Practice</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<body>
<header>
<div class="logo"></div>
<nav>
<ul class="nav-ul">
<li> Homes</li>
<li> About</li>
<li>Shop</li>
</ul>
</nav>
<a class="nav-button" href="#"><button>Login</button></a>
</header>
</body>
</html>
I just copy your code and place in a file structure like this
And it works.
Absolute path like this also worked well:
background-image: url('C:/Users/User/Documents/test/images/logo.png');
This is my code here:
I want to hide the image when the mouse rolls over and only display text.Then again, when the mouse moves away, the image should be visible.
The text property is working just fine but image is having issues.
It completely disappears after clicking.
function updated1(element){
document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';
}
function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
}
#d1 {
border: 1px solid;
padding-top: 7px;
text-align: center;
box-shadow: 5px 10px #DBE0E3;
margin-top: 3%;
color: #FFFFFF;
width: 350px;
height: 350px;
font-size: 40px;
font-weight: bold;
line-height: 70px;
background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<section id="d1" class="col-md-4 col-md-push-4 col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
<p>WEB DEVELOPMENT
<p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">
</section>
</div>
</div>
</body>
</html>
LINK TO MY CODE ON CODEPEN IS HERE
when you set innerHTML you are wiping out your image
function updated1(element){
document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';
}
function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
}
.d1{
border: 1px solid;
padding-top: 7px;
text-align: center;
box-shadow: 5px 10px #DBE0E3;
margin-top: 3%;
color: #FFFFFF;
width: 350px;
height: 350px;
font-size: 40px;
font-weight: bold;
line-height: 70px;
background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<section class="d1" class="col-md-4 col-md-push-4 col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
<p id='d1'>WEB DEVELOPMENT</p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" width="90%">
</section>
</div>
</div>
</body>
</html>
Your problem is this part
document.getElementById("d1").innerHTML = "...";
Because this code removes all the children from the parent and inserts the text. So basically, when your mouse leaves, there is no image there to make it visible. You don't need that much Javasctipt to create the effect you desire. Better HML, more CSS and less JS:
<section
id="d1"
class="col-md-4 col-md-push-4 col-xs-12"
onmouseover="updated1(this)"
onmouseleave="undod1()"
>
<p class="message">WEB DEVELOPMENT<p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">
</section>
#d1:hover {
border-radius: 4.5%;
}
img {
opacity: 1
}
#d1:hover img {
opacity: 0
}
let message = "WEB DEVELOPMENT";
let parent = document.querySelector("#d1");
let item = document.querySelector(".message");
function updated1(element){
item.innerText = "web deveopment and designing, html css js and bootstrap";
}
function undod1(){
item.innerText = message;
}
If you try doing something more complex than you asked, try to add/remove classes to change style instead of adding styles in Javascript. This is an easier and cleaner way to change styles.
I have sign of reloading, but it go back and forth, but I need only to go back. I tried everything I know, but it doesn`t work. Please, help me, thanks:)
var sign_reload = document.getElementById("reload");
document.getElementById("btn").onclick = function () {
if (sign_reload.style.transform == "rotate(360deg)")
sign_reload.style.transform = "rotate(0deg)";
else sign_reload.style.transform = "rotate(360deg)";
};
#reload {
display: block;
margin-left: 100px;
position: absolute;
font-size: 40px;
transition: 2.5s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script
src="https://kit.fontawesome.com/8f82e7a054.js"
crossorigin="anonymous"
></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="reload"><i class="fas fa-redo"></i></div>
<button id="btn">CLICK ME</button>
<script src="main.js"></script>
</body>
</html>
You can consider the use of animation by adding a class that you remove on animation end:
var sign_reload = document.getElementById("reload");
sign_reload.addEventListener("animationend", function() {
sign_reload.classList.remove('rotate');
});
document.getElementById("btn").onclick = function() {
sign_reload.classList.add('rotate');
};
#reload {
display: block;
margin-left: 100px;
position: absolute;
font-size: 40px;
}
.rotate {
animation: change 2s;
}
#keyframes change {
to {
transform: rotate(360deg);
}
}
<script src="https://kit.fontawesome.com/8f82e7a054.js" crossorigin="anonymous"></script>
<div id="reload"><i class="fas fa-redo"></i></div>
<button id="btn">CLICK ME</button>
Hello everyone I am creating a math game for kids and I want the user to be able to change the background image of their game when he/she clicks a button
I have a space / jungle / desert theme I tried this code that i found online but it won't work it works here though http://jsfiddle.net/Eqdfs/27/
how come?
Please keep in mind that I am using jquery mobile in my original program and I have a default background set with this code
<style>
body {
background-image: url("http://s21.postimg.org/9bj52fal3/sdfsdfdsf.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
background-size:100% 100%;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
then i found this code that claims it can add buttons that will change the background image but I cant get it to work in this simple html file yet alone in my actual game
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset = "utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.js></script>
<script src="//http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style>
body {
background-repeat:repeat;
background-position:top-left;
}
body.class1 {
background-image:url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image:url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
<script>
$("#btn1").click(function() {
$('body').removeClass();
$('body').addClass('class1');
});
$("#btn2").click(function() {
$('body').removeClass();
$('body').addClass('class2');
});
$("#btn3").click(function() {
$('body').removeClass();
$('body').addClass('class3');
});
</script>
</head>
<body>
<a id="btn1">Noise BG</a><br/>
<a id="btn2">RVB BG</a><br/>
<a id="btn3">dunno BG</a>
</body>
</html>
the real problem is the jquery-mobile and jquery-UI are conflicting each other. Also there are few markup problems in your design. Try this code and check if its working
EDIT Updated jquery. Now the background is changing with single click.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<style type="text/css">
body {
background-repeat: repeat;
background-position: top-left;
}
a#btn1,
a#btn2,
a#btn3 {
color: #fff;
cursor: pointer;
background: #333;
padding: 0px 15px;
}
body.class1 {
background-image: url('http://www.dca.fee.unicamp.br/~lotufo/Courses/ia-636-1995/alberto/proj5/html/pattern_Id.gif');
}
body.class2 {
background-image: url('http://upload.wikimedia.org/wikipedia/commons/e/ec/Pattern_square_16.png');
}
body.class3 {
background-image: url('http://www.herbactive.com.br/catalog/view/theme/default/image/pattern/pattern-11.png');
}
</style>
</head>
<body>
<a id="btn1">Noise BG</a>
<br/>
<a id="btn2">RVB BG</a>
<br/>
<a id="btn3">dunno BG</a>
<script>
$("#btn1").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class1');
});
$("#btn2").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class2');
});
$("#btn3").click(function() {
$('body').removeAttr('class');
$('body').attr('class', 'class3');
});
</script>
</body>
</html>
Your fiddle code actually worked for me running inside MS Edge.
Just Change this line:
<SCRIPT LANGUAGE="JavaScript">
to
<script>
Additionally, You aren't defining type while including script files, Add this line too in each opening <script> tag
type="text/javascript"