I'm trying to create a hover that will change the picture. A lot of tutorials tell me to try onmouseover and onmouseout. But Brackets (the program I use to code) isn't able to find the second picture called "test2.png". Does anybody know how I could handle the issue, preferably using only HTML.
Here are the tutorials I watched that show what I would like to achieve:
https://www.youtube.com/watch?v=qtpa_r1ILjo
https://www.youtube.com/watch?v=y4RJDUI7M8Y
<!DOCTYPE html>
<html>
<head>
<title>Portfolio V1</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script type="text/javascript"></script>
</head>
<body>
<img src="images/test1.png" onmouseover="this.src=images/test2.png" onmouseout="this.src='test1.png'" >
</body>
</html>
You need to make sure that both images exists and in the correct folder.
Make sure that the name is exactly the same as you write it in your code.
One of the problems you had is that you didn't wrap the name of the image (in onmouseover with quotes: 'images/test2.png').
In the onmouseout you set the image to test1.png instead of images/test1.png. Is it intended?
Here is a working example:
<img src="https://dummyimage.com/600x400/000/fff" onmouseover="this.src='https://dummyimage.com/600x400/f00/fff'" onmouseout="this.src='https://dummyimage.com/600x400/000/fff'" >
I made an example with background-color, but the principle is here.
You can check the code :
const div = document.querySelector('div');
window.addEventListener('mouseover', () => {
div.style.background = 'red'
})
div {
width: 100px;
height: 100px;
opacity: 1;
background-color: green;
transition: 3s;
}
<div></div>
You have to use JavaScript to make this work. It won't work inplace like you have tried.
EDIT: It does work inplace, but you have missed the single quotes.
In the onmouseover attribute you should refer to a JavaScript function. Have a look at this question about onmouseover for more information.
For example you could use something like this:
<img src="images/test1.png" onmouseover="MouseOver(this)" onmouseout="="MouseOut(this)" >
Now you refer to event handlers for the onmouseover and onmouseout event. However, these event handlers still need to get defined in a javascript snippet. This could get embedded in the element like this:
function MouseOver(myimg) {
myimg.src="images/test2.png";
}
function MouseOut(myimg) {
myimg.src="images/test1.png";
}
Related
I am trying to find a way to make my code appear as text in HTML but in the way you see the code on here
I want my code to appear like this on the website
right now when I run the code, I got it to appear as text but it looks like this:
<h1>"this is a heading"</h1>
But I want it to look like this:
<h1>"this is a heading"</h1>
basically, I'm trying to get the code that appears on my website to look like I took a screenshot of the code editor and put it on the site
If you don't understand what I'm trying to ask please ask me and I will try to elaborate further
quick answer will be make a div, give it a specific background color, use overflow properties to make it scrollable. Use monospace font and give specific color and background color. That'll look like a screenshot you took from code editor. but it'll be scrollable and it's necessary if you have a lot of codes.
<h1><span style="background-color: #e4e6e8;">"this is a heading"</span>
</h1>
A simple inline style should be sufficient for a one off but if you wanted to repeat it then defining a class either in the <head> section or by defining the class in a stylesheet and adding a link again in the <head> section would be a better approach.
Classes can be re-used easily and if you need to make changes then you only need to change the class attributes/definition and upon reload you changes are reflected everywhere the class was used/inserted.
This is simplest way for your apparently simple need.
<h1><span style="background-color: #e4e6e8;">"this is a heading"</span></h1>
To learn more about styling HTML why not follow this link perhaps Styling HTML Elements # Tutorial Republic (Sadly no affiliation!)
I'm not sure if I understand your question but You can use the <pre>...</pre> tag to obtain code like text :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My document</title>
<script>
function escapeHTML(html){
const chars = {'<':'<','>':'>'};
let s = html;
s = s.replace(/[<>]/g, m => chars[m]);
return(s + "<br>");
}
</script>
</head>
<body>
<h1 style="font-size:1.6em">"Title"</h1>
<div style="font-size:1.4em">code</div>
<pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">
Your code is written here
</pre>
<script>
let display = document.getElementById("output");
display.innerHTML = escapeHTML('<h1 style="font-size:1.6em">"Title"</h1>');
display.innerHTML += escapeHTML(' <div style="font-size:1.4em">code</div>');
display.innerHTML += escapeHTML(' <pre id="output" style="font-size:1.4em;display:inline-block;background-color:#cccccc">');
display.innerHTML += escapeHTML(' Your code is written here');
display.innerHTML += escapeHTML(' </pre>');
</script>
</body>
</html>
Here is the full code:
https://www.w3schools.com/code/tryit.asp?filename=FVPUZUO2Z6YQ
For some reason, my link is hidden only when I'm using sponsor-link class. Every other class is okay, even if other classes are identical, like button-link class:
<html>
<head>
<style>
.button-link {
}
.sponsor-link {
}
</style>
</head>
<body>
<a href="aaaa" class="sponsor-link">
11111
</a>
</body>
</html>
How is it making any sense? What is the actual problem with the class name sponsor-link?
This is due to Ad Block being enabled. Pause it on the page you're working on and then you'll see that sponsor-link style will work. But of course, your best bet is to change the name of that style.
I am trying to get one div to show once another div is clicked.
Here is the HTML I have right now:
<li><div class="parent7">Light Finish</div>
<li><div class="child1">Twin</div>
Here is the CSS:
.parent7 {
}
.child1 {
display: none;
}
I'm not sure what my next step is. What code would I use to change .child1 display to block on click of .parent7?
You could use javascript event onclick
<div onclick="myFunction()">Light Finish</div>
When the user click on the div, it call a function that you create like this :
<script>
function myFunction()
{
document.getElementById("TheIdOfTheDiv").style.display = "block";
}
</script>
just give a id to one of the div you want to show.
It is actually possible to do what you are asking in pure HTML/CSS, provided that you don't have to support IE8. It uses, however, a rather obscure technique. The key is to use the target psuedo-selector, which applies if the element is the target of a clicked link element.
HTML:
<div>
<a href='#to-show'>Click to show other div.</a>
</div>
<div id='to-show'>Here I am.<div>
CSS:
#to-show{
display: none;
}
#to-show:target{
display: block;
}
Here's a link to the JSBin with this code: http://jsbin.com/dirugavoba/edit?html,css,js,output
Now, that being said, the best way to accomplish interactivity really is with JavaScript. Despite this proof of concept, JavaScript provides far more intuitive and versatile ways to provide this functionality. The only real reason to use the technique I'm showing here is if you want or have to cater to the small handful of users who still turn JavaScript off.
you can use jQuery to do what you need. Like this:
$(".parent7").on("click", function () {
$(".child1").css("display", "block");
});
Below is how you would use the jQuery code. I am also putting information on how to link to the jQuery library in your html document.
Here is a very basic, but complete webpage page example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.parent7 {
}
.child1 {
display: none;
}
</style>
</head>
<body>
<div class="parent7">Light Finish</div>
<div class="child1">Twin</div>
<script>
$(".parent7").on("click", function () {
$(".child1").css("display", "block");
});
</script>
</body>
</html>
You can choose to get jQuery from a CDN (Content Delivery Network) just like I did in the above example, or you can download jQuery and link the file however you want. You can dowload jQuery Here.
You have to use javascript when dealing with clickevents and manipulating the html/style.
Look at the "onclick" method which can be set on an html element.
I'm using a combination of html and very basic jQuery in order to make an img that functions like a button so that when the img is clicked, the src of the image (src1) changes to another src (src2, that being the image of the button having been pushed down).
I'm trying to make it so that if that same image (now src2) is clicked, then it changes back to the original src (src1).
I hope that wasn't a headache to understand, and I can clarify if needed.
Here's what I have for code:
<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>
/* jQuery */
function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");
if (pixelbutton.style.src=="images/pixelbutton.png") {
document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
}
else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
document.getElementById("pixelbutton").src="images/pixelbutton.png";
}
}
I'm a huge noob, so less complicated answers, if possible, are appreciated.
I recommend to place your function in head section for consistency if you haven't.
Your "pixelbutton.style.src" was wrong since the src is an attribute and not in css, but manipulating URL is rather difficult. I agree with Amareswar's answer to use background image in css.
Another way I did this is using the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
and modifying your body code:
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
Instead of repalcing URL can use a div with background-image css property and set another class on click of the div with another image as background image
I would like to get the same result as below but without the duplication (the same link appears twice):
<html>
<body>
http://www.w3schools.com
</body>
</html>
Is it possible in static HTML without Javascript?
You can do this without duplication using CSS selectors,
by using the attr function in CSS.
In your style sheet you can add this:
a::after {
content: attr(href);
}
For your example in the question:
<html>
<style>
a::after {
content: attr(href);
}
</style>
<body>
Some text
</body>
</html>
And it displays the link after Some text.
The HTML standard (a) only allows certain things to be placed in a href URL itself, and a "please use the textual description as the link" marker isn't one of those things.
You're right that it would save a lot of duplication, though most people may think that the textual description of a link should be a little more human-readable than a link. You wouldn't, for example, want to see the following in your web page:
http://www.google.com/patents?id=vmidAAAAEBAJ&printsec=frontcover&dq=database&hl=en&sa=X&ei=tN-0T-TtKu3TmAWNq7DiDw&ved=0CDUQ6AEwAA
Having said that, you can do it with CSS, specifically by using after to add elements containing the textual href attribute to the document. I'd suggest limiting it to a specific class so that you're not modifying every single a tag that you have, something like:
<html>
<style>
.add-link::after {
content: " (" attr(href) ")";
}
</style>
<body>
<a class="add-link" href="http://www.example.com">Link added</a>
<p />
No link added
</body>
</html>
The first link will have the link text added, the second will not. Unfortunately that won't solve the problem of monstrously large URIs (see above) being placed on the page as text, but you at least have the option of not attaching the add-link class on those):
(a): The HTML5 standard specifies the A element here and the URI specification here.
You can't, you'll either have to use JavaScript or keep it as it is.
No, there is no way to remove the duplication with only static html.
It is also not neccessary. Many Webpages use PHP or something like this and to make links in PHP is easy :)
PHP example:
<?php echo $item->link; ?>
Actually a good way of formatting a link is:
<html>
<body>
w3schools.com
</body>
</html>