click handler is not working on image - html

Hello every one I have wrote a simple code in html5 in which I am calling the click handler of image and display the alert but I don't know why it isn't working can any one please guide Where am I doing wrong
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<script>
function clickhandler(){
alert ("I am called");
}
</script>
<style>
#div1
{
float:left;
width:100px;
height:150px;
margin:10px;
border:1px solid #aaaaaa;
}
</style>
<body>
<div id="div1">
<img src="myimage.png" onClick="clickhandler" draggable="false" />
<img>
</div>
</body>
</html>
THANKS


It should look like this:
<img src="myimage.png" onClick="clickhandler()" draggable="false" />
The onClick attribute should be a function call or statement.


You should also move your style and script tags inside the head tag:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
function clickhandler(){
alert("I am called");
}
</script>
<style>
#div1
{
float:left;
width:100px;
height:150px;
margin:10px;
border:1px solid #aaaaaa;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Exponential_Function_(Abs_Imag_Part_at_Infinity)_Density.png" onclick="clickhandler()" draggable="false" />
</div>
</body>
</html>

Related

working with html and javascript and changing the properties of html document but this is not working in my case?

here I am trying to change the image source property with the help of javascript but it is not working my case how can I change this .some one suggest me change in code.so that is can work in my case.
this is the CSS file for formatting the HTML code.
here I am using both logos from the internet.
also changing the background and background is changed but imaged is not changed.
function hello() {
console.log(document.getElementsByTagName("img").src);
document.getElementsByTagName("img").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
</body>
</html>

Get the elements id instead. document.getElementById("hero").src = "https://www.facebook.com/images/fb_icon_325x325.png";
This way you are specific in which element you are trying to get. Because you using a tag, you need to specify which child of the tag you are getting.
could use document.getElementsByTagName("img").item(0); or document.getElementsByTagName("img")[0] or be more specific and get it by its id.
The [0] is the first occurrence of the tag on the page, numerical increments of items in code start with 0, if there were two, the key would be [1].
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
document.getElementById("hero").src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>

The error was that getelementsbyTagName returns an HTMLCollection list which is an array-like object.
Thus if you want to access the element , you have to use the arr[0] style.
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
Code
h2 {
text-align: center;
}
body {
margin: auto;
padding: 5px;
}
#maincontent {
text-align: center;
}
.btn {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="door.css" />
<script src="main.js"></script>
<title>Door</title>
</head>
<head>
</head>
<body>
<h2 text-align="center">Open The Door</h2>
<div id="maincontent">
<img
src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
id="hero"
width="400px"
height="600px"
/>
</div>
<div class="btn">
<button id="workbtn" onclick="hello();">Open Door</button>
</div>
<script>
function hello() {
console.log(document.getElementsByTagName("img")[0].src);
document.getElementsByTagName("img")[0].src =
"https://www.facebook.com/images/fb_icon_325x325.png";
document.body.style.background = "red";
}
</script>
</body>
</html>

Tooltips not working on IE10

I want to show tooltips on parts of an image. I have this technique where it puts a invisible div on the image with absolute positioning.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" >
</head>
<body>
<div style="position:relative;">
<img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
<div title="HELLO" style="position:absolute; width:100px; height:100px; top:0; left:0;"></div>
</div>
</body>
</html>
but when I hover over, the tooltip does not show.
Does anyone know what's wrong? This same code works on chrome 59.
Thanks

this code seems to be ok on Explorer, Chrome, Firefox and Edge.
img tag has a different behaviour of div tag in Explorer.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
</head>
<body>
<div style="position:relative;">
<img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
<img style="position:absolute; width:100px; height:100px; top:0; left:0; border-width: 0px;" src="javascript:void(0)" title="Test" alt="">
</div>
</body>
</html>

Making an image fit to size of the html page using css

<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.

.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}

If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.

You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>

How to insert a Picture and fit it in <head> tag

this is my problem:
<!Demo html>
<html>
<head>
<img src="html\111.jpg" alt="can't be displayed" align="center">
</head>
<body>
</body>
and i just want to fit the picture onto the screen

If I understand your problem correctly, you want the image to cover the screen, then this is the simplest solution to your problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="html\111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</body>
But if your intention is actually to use the image as a background, I would strongly suggest adding it as a background image (with CSS) to the body element.
Edit:
With css:
html, body {
width: 100%;
height: 100%;
}
body {
background: url( html/111.jpg ) 100% 100%;
}
Also, don't forgot to link to your .css in your .html file.
<head>
<link rel="stylesheet" href="css/styles.css">
</head>

For inside a head tag......
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background: url(url of the image) !important; }
</style>
</head>
<body>
yourbody
</body>
</html

I think this is what you want!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<img src="html/111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</header>
</body>

In this snippet just replace src code with your link.
<!Demo html>
<html>
<head>
<style>
.img{
top:0px;
left:0px;
position:absolute;
height:100%;
width:100%;
}
</style>
</head>
<body>
<img src="http://wallpapersrang.com/wp-content/uploads/2015/12/wallpapers-for-3d-desktop-wallpapers-hd.jpg" alt="can't be displayed" align="center" class="img">
</body>

Unable to center input elements inside a div

I'm trying to center elements inside a div. Here is an example:
I made a wrapper for the number inputs and trying to apply text-center property on them but it's not working. I also changed the display to block, but that doesn't solve it either. What am I missing?
<!doctype html>
<html>
<head>
<title>Learning Ajax</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"> </script>
<!-- Or source it to http://code.jquery.com/jquery-1.11.2.min.js
This will be faster as jquery website will be faster than mine. -->
<style type="text/css">
h1,h2
{
text-align:center;
}
.num1,.num2
{
text-align:center;
}
.inputs
{
text-align:center;
display:block;
}
</style>
</head>
<body>
<div id="container">
<h1>Calculator</h1>
<h2>Enter two numbers and select an operation</h2>
<div id="inputs">
<input id="num1">Number 1</input>
<input id="num2">Number 2</input>
</div>
</div>
</body>
</html>

try giving your #inputs a width and set left/right margins to auto.
#inputs {
width: 50%;
margin: 0 auto;
}