Regarding HTML5 - javascript

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>

Related

Div element should show up when clicked

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>

Display image legend on hover (not as tooltip) using innerHTML?

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>

HTML text doesn't print to screen when using canvas in conjunction

In this snippet of code, even though I align the text far outside of the canvas boundaries, the text shows up below the canvas height. I'm new to HTML and I question why using a canvas seems to block the whole row it's on. I also want to know if there is a way around this, so I can have my canvas and have the text to the right of it on the same row.
<!DOCTYPE html>
<html>
<canvas id= "myCanvas" width="600" height="600">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
</body>
</html>
<!DOCTYPE html>
<html>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>
<head>
<title>test</title>
<meta name="generator" content="BBEdit 11.6" />
</head>
<body>
<p style="text-align:right; display: inline-block;">JavaScript can change the content of an HTML element:</p>
</body>
</html>
First your code is some wrong, you need to follow a structure.
<!DOCTYPE html>
<html>
<head>
<!-- Code -->
</head>
<body>
<!-- Code -->
</body>
</html>
Your canvas you need to write inside body tag.
You have many options but each options have differences, depend of what you want to do after, you can to choose :
float, inline, inline-block or inline-flex
Float:
This is the old form, that make an element float.
<canvas style="float:left; border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="text-align:right">JavaScript can change the content of an HTML element:</p>
Inline:
Element in one line but doesn't respect the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline;">JavaScript can change the content of an HTML element:</p>
Inline-block:
Element in one line respecting the width and height property of the element.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-block;">JavaScript can change the content of an HTML element:</p>
Inline-Flex:
Introduced in css3, inline in version flex.
<canvas style="border:1px solid red;" id= "myCanvas" width="30" height="30">
</canvas>
<p style="display:inline-flex;">JavaScript can change the content of an HTML element:</p>
The definitions are very quickly, refer more information:
Reference 1
Reference 2
Update:
Align in the top, using flex:
<div style="display:flex;align-self: flex-start">
<canvas style="border:1px solid red;" id= "myCanvas" width="100" height="100">
</canvas>
<p style="margin-top:0">JavaScript can change the content of an HTML element:</p>
</div>

Simple HTML Image Slideshow

I'm looking for a very simple and straightforward image slideshow. No extra features just a selection of images fading in and out. Potrait and Landscapes need to be shown in their full size without any scrollbars being enabled. I managed to find this one:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="fadeSlideShow.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script>
</head>
<body>
<div id="slideshow">
<img src="../images/large/nature/BokehPlant1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the last image in the slideshow -->
<img src="../images/large/nature/BokehPlant2.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/BokehPlant3.jpg" width="640" height="480" border="0" alt="" />
<img src="../images/large/nature/RusticLeaf1.jpg" width="640" height="480" border="0" alt="" /> <!-- This is the first image in the slideshow -->
</div>
</body>
However it doesn't seem to want to work though. All it does it renders the images on after another.
Apologies in advance I haven't played with HTML in a while and I don't have much experience regarding JavaScript.
Many thanks in Advance!
Harry
I don't know if this might help you
HTML
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="slideshow">
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/pool.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/cave.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/fruits.jpg" style="width:550px;height:250px" />
</div>
<div>
<img src="http://www.dynamicdrive.com/dynamicindex4/dog.jpg" style="width:550px;height:250px" />
</div>
</div>
</body>
</html>
JS
$(document).ready(function(){
SlideShow();
});
function SlideShow() {
$('#slideshow > div:gt(0)').hide();
setInterval(function () {
$('#slideshow > div:first')
.fadeOut(6000)
.next()
.fadeIn(6000)
.end()
.appendTo('#slideshow');
}, 6000);
}
LINK
http://jsbin.com/duyoyuyiwu/1/edit?html,js,output

how to change the background images with fade

I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.

Categories

Resources