I want a div element, on which I click. Then another div element should pop up.
I tried something, but don't know, why it doesn't work.
<div class="div" onclick="myFunction()">
<img class="image" src="..." height="80px" width="80px">
<h2 class="header">text</h2>
<img class="more" src="..." height="50px" width="50px">
</div>
<script>
function myFunction() {
document.getElementById('text')
[0].classList.toggle('display')
<div class="news" onclick="myFunction()">
<img class="coronanewsimg" src="https://www.mediothek-krefeld.de/files/content-fotos/Bilder%20fuer%20Neuigkeiten%20und%20Slider/628px-Achtung.svg.png" height="80px" width="80px">
<h2 class="coronanewshead">Sonderschließzeit bis vorraussichtlich 07.03.21 aufgrund des Coronavirus</h2>
<img class="mehr-pfeil" src="pics/mehr-pfeil.png" height="50px" width="50px">
</div>
<script>
function myFunction() {
document.getElementById('coronanewstext')
[0].classList.toggle('display')
}
</script>
<div class="text">
text
</div>
You could also use this method to create a div element when the event occurs.
<!DOCTYPE html>
<html>
<head>
<title>Event handling</title>
</head>
<body>
<p>Click the button to pop up another div element.</p>
<button onclick="popDiv()">Click me</button>
<script>
function popDiv() {
var division = document.createElement("div");
division.innerText = "This is a new DIV element";
division.style.color = "blue";
division.style.margin = "10px"; //Simple styling of div
division.style.background = "whitesmoke";
division.style.border = "1px solid black";
document.body.appendChild(division);
}
</script>
</body>
</html>
Also correct upon the tag's opening and closing in your code, or this may also result in error.
simple example how on click works for an element id
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>How to display the Day, Date, Time at the touch of a button</h1>
<p id="demo">We would like it to appear hear.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
Related
whenever i am attaching a image in HTML5 the image size is getting so large.I gave the height and width also but it is not changing
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body> style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>
Firstly, there is a redundant < in your body tag.
Then, you can use width and height attributes as below in the img tag to specify the image size
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style="width:250px;">
<h1>Favorite
<Pic>
</h1>
<p> This is one of the favourite pics.</p>
<img src="https://via.placeholder.com/150" alt="My Favoutite Pic" width="100" height="100">
</div>
</body>
</html>
Use the height and width image attributes, like this:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite Pic</h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" width="150" height="150" alt="My Favoutite Pic">
</div>
</body>
</html>
Make sure to maintain the ratio of the length and width of the image, to keep the image looking good.
You are missing height and width tags on the img tag. The size of the div wont affect it. It might help if you set it to something like this
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0; background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" height="500" width="500" alt="My Favoutite Pic" >
</div>
</body>
</html>
The width and height are just an example, pick the one that is right for your image.
You had an extra ">" in your body tag. Your code should be as follows:
<!DOCTYPE html>
<html>
<head>
<title>Favourite movie</title>
</head>
<body style="margin:0;<background-color:green:color:#ffff">
<div style= "width:250px;">
<h1>Favorite <Pic>></h1>
<p> This is one of the favourite pics.</p>
<img src="black cat.jpg" alt="My Favoutite Pic">
</div>
</body>
</html>
I have a webpage with many images, each of which has a title attribute. When I hover over the image, I want the title text to display in a separate legend element I have created (not as a tiny hover tooltip). I have a mouseover function which works fine - i.e. when I hover over the image the legend changes value. But I want that value to be the title text of the individual image - which I don't know how to access. I have tried …innerHTML = this.title which is obviously incorrect.
[The number of images is large and changing (like an album), so I can't add separate code for each <img> tag. I can use alt or any other <img> attribute to make this work. I'm not wedded to the innerHTML method, either, but am hoping for some simple code to do the trick!]
Please help? Thanks! (FYI, I'm a novice coder.)
<!DOCTYPE html>
<html>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver()" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver()" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver()" title="Dinner">
</div>
<script>
function mouseOver() {
document.getElementById("legend").innerHTML = this.title;
}
</script>
</body>
</html>
It looks like you are trying to use this.title to represent the different images? If you want their titles to appear in the <h1> tag you need to pass the information to the function shown below.
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" onmouseover="mouseOver(this)" title="Breakfast">
<img src="image2.jpg" onmouseover="mouseOver(this)" title="Lunch">
<img src="image3.jpg" onmouseover="mouseOver(this)" title="Dinner">
</div>
<script>
function mouseOver(x) {
document.getElementById("legend").innerHTML = x.title;
}
</script>
I guess its helpful .
But i use Jquery
just need call this code in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1 id="legend">title appears here</h1>
<div>
<img src="image1.jpg" class="class_of_div" title="Breakfast">
<img src="image2.jpg" class="class_of_div" title="Lunch">
<img src="image3.jpg" class="class_of_div" title="Dinner">
</div>
<script>
$(document).on('mouseover', '.class_of_div', function () {
var thiss=$(this);
$('#legend').text(thiss.attr('title'));
});
</script>
</body>
</html>
I'm trying to display some complex text next to a picture when a button is clicked. So far I made the picture appear randomly when the button us clicked.
I cannot make the text work(it's basically a list) in the function, so I want to add the text in HTML and make it display/hide depending on the random number.
The picture and the text must correspond.
I also tried to make the text and picture(that are declared in HTML) display/hide depending on a number only with a function. But it didn't work for me.
That's the HTML i have:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "utf-8">
<title>Project</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<script src= "javaindex.js"></script>
<button onclick="myFunc()" id="select" class="choosebtn">Select</button>
</div>
<div class="main">
<img src="blank.jpg" name="picture">
<div id="text">
<p id="list1" >
<h1> headingN</h1>
<ul>
<li>elementN1</li>
<li>elementN2</li>
<li> elementN3</li>
</ul>
</p>
<p id="list2" >
<h1> heading</h1>
<ul>
<li>element1</li>
<li>element2</li>
<li> element3</li>
</ul>
</p>
</div>
</div>
<footer>Footer</footer>
</body>
</html>
The js.file is:
function myFunc() {
imgArray = new Array()
imgArray[0] = "image1.jpg"
imgArray[1] = "image2.jpg"
imgArray[2] = "image3.jpg"
imgArray[3] = "image4.jpg"
document.getElementById("select").onclick = myFunc;
randomN = Math.floor(Math.random()*4);
document.picture.src = imgArray[randomN];
if ( randomN == 0 ){
document.getElementById("list1").style.display = "block";
}
else if ( randomN == 1){
document.getElementById("list2").style.display = "block";
}
else{
document.getElementById("text").style.display = "none";
}
}
hope this trick will helps..
I created a container for all the text content (act as my parent div)
and create a div for each content (child divs) then add ids that corresponds on my random numbers.
<img src="http://via.placeholder.com/350x150?text=Default" name="picture">
<div id="container" class="main">
<div id="content" style="border: 1px solid #000; width:350px;">
<h1> Heading Default</h1>
<p>Sample Default Message Sample Default Message</p>
</div>
<div id="content1" style="border: 1px solid #000; width:350px; display: none;">
<h1>Heading 1</h1>
<p>Sample One Message Sample One Message</p>
</div>
<div id="content2" style="border: 1px solid #000; width:350px; display: none;">
<h1> Heading 2 </h1>
<p>Sample Two Message Sample Two Message</p>
</div>
<div id="content3" style="border: 1px solid #000; width:350px; display: none;">
<h1>Heading 3 </h1>
<p>Sample Three Message Sample Three Message</p>
</div>
</div>
then do the trick with javascript by hiding all (child divs) and just leave the divs you want to show please see the working fiddle below.
working fiddle: https://jsfiddle.net/a1pLnbm0/26/
Hope I get it right Cheers!
I try to add some text right on a javascript slideshow, but somehow it doesn't work out. The text shows on the top and slideshow is looping below the text.
How can I make the text show right on images? Please take a look
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar.gif"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<div style="width:100px; height:56px">
<div style="width:100px; height:56px; z-index:2">Tring to add some text on the top
<div style="width:100px; height:56px; z-index:1">
<img src="firstcar.gif" name="slide" width="100" height="56" />
</div>
</div>
</div>
<script>
<!--
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
setTimeout("slideit()",1500)
}
slideit()
//-->
</script>
</body>
</html>
you prob need position: absolute if you want to use z-index
or you can reduce the height of the img to smaller than the div container of the text
try this:
<body>
<div style="width:100px; height:56px">
<div style="position:absolute; z-index:2">Tring to add some text on the top
</div>
<div style="position: absolute;width:100px; height:56px; z-index:1">
<img src="firstcar.gif" name="slide" width="100" height="56" />
</div>
</div>
</body>
Move the text you are adding into an element below the image element, give it absolute positioning, give the containing div relative positioning, and position the text using top, left, right, or bottom.
HTML:
<div class="container">
<img src="firstcar.gif" name="slide" width="100" height="56" />
<span>Added Text Here</span>
</div>
CSS:
div.container {
position: relative;
}
span {
position: absolute;
top: 0;
}
I need a simple script that allows me to change the inner html of a p tag which in my case is an image to just plain text when I hover over it.
Example:
<div id="one">
<p><img src="events.png" alt="" /></p>
</div>
When i hover over the above p tag i want it to change to the text as seen below
<div id="one">
<p>Events</p>
</div>
You don't need to use javascript at all for this. This is handled very simply using css.
<div id="one">
<p>
<span>Events</span>
<img src="events.png" alt="" />
</p>
</div>
CSS:
#one p>span{ display:none; }
#one p:hover span{ display:inline; }
#one p:hover img{ display:none; }
Here's a fiddle of it in action: http://jsfiddle.net/CKpCk/
Try the following:
var html = $('#one p').html()
$('#one').hover(function(){
$('p', this).html('Events');
}, function() {
$('p', this).html(html);
})
Demo
Try this one:
<html>
<head>
<title>Try</title>
</head>
<script type="application/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testHover").hover(function()
{
$("#testHover").html("Events");
});
});
</script>
<body>
<div id="one">
<p style="width:200px;"id="testHover"><img src="events.jpg" alt="" /></p>
</div>
</body>
</html>