i'm experimenting in school with turning an image into a link but so far the link is not contained to the image but the entire row and i have tried looking at several example but none have worked for me so far. here is my code
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<title>Alpha page</title>
</head>
<p>The image is a link. You can click on it.</p>
<a href="https://www.youtube.com">
<img src="youtube.png" alt="Youtube">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
I think i know what you mean, but enlighten me if im wrong.
Your trying to use png image but link is also working if u click outside the visible image. (white area) This is because the link is the full image of the H x W
Example
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<title>Alpha page</title>
</head>
<p>The image is a link. You can click on it.</p>
<a href="https://www.youtube.com">
<img src="https://cdn3.iconfinder.com/data/icons/social-icons-5/607/YouTube_Play.png" alt="Youtube">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
If you want only a certain area you will have to use image-map. W3 LINK
I have used this site to ease the time.
Example
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta charset="utf-8">
<title>Alpha page</title>
</head>
<p>The image is a link. You can click on it.</p>
<map name="image-map">
<area target="" alt="youtube" title="" href="https://www.youtube.com" coords="304,303,302" shape="circle">
</map>
<img src="https://cdn3.iconfinder.com/data/icons/social-icons-5/607/YouTube_Play.png" usemap="#image-map">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the image.</p>
</body>
</html>
Related
enter image description hereI created a website with a video as my background for my front page. My problem is that when I enter new set of codes supposedly for another tab in the same page but below it, it does not work. i tried using div class container but it does not work. How to fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Lakad Dalampasigan</title>
</head>
<body>
<section class="showcase">
<header>
<h2 class="logo">LAKAD DALAMPASIGAN</h2>
<div class="toggle"><img src="log1.png" width="90" height="90"></div>
</header>
<video src="ocean.mp4" muted loop autoplay></video>
<div class="overlay"></div>
<div class="text">
<h2>Lakad Dalampasigan </h2>
<h3></h3>
<p>Climate has always changed and is always changing.
Climate change was reframed from an environmental concern to a public health issue prior to and during this ongoing crisis, and it may soon be deemed a public health emergency. </p>
<a href="sec.html
" target="_blank">Learn more</a>
</div>
</section>
</body>
</html>
I'm running the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NHS Game</title>
<link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}" />
</head>
<body>
<img src="https://www.pngkey.com/png/full/901-9019597_apple-logo-riot-chat-logo.png" alt="MacOS" width="120" />
<img src="https://www.pngkey.com/png/full/901-9019597_apple-logo-riot-chat-logo.png" alt="MacOS" width="120" />
</body>
</html>
the website is loading fine, but when I download the file, it shows it as a '.html' file and underneath it says No file:
Please help...
In HTML5, in most browsers, you can add a 'download' attribute to the a element.
for example:
<a href="http://www.example.com/index.html" download>Download</a>
Trying out the image blog application to understand floatprpertiy of CSS. As the link is accurate from Flickr Photo Website, the webpage is unable to render the images.
Tried to look up w3schools for syntax of img tag of HTML.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="photos.css">
<meta charset="utf-8">
</head>
<body>
<img src="https://flic.kr/p/qh8u7t">
<img src="https://flic.kr/p/nZybCW">
<img src="https://flic.kr/p/odUZLT">
<img src="https://flic.kr/p/pnzXJv">
<img src="https://flic.kr/p/qyz47B">
<img src="https://flic.kr/p/q2PmdR">
<img src="https://flic.kr/p/nM4vbe">
<img src="https://flic.kr/p/fvVSdn">
<img src="https://flic.kr/p/drtH69">
</body>
</html>
I'm having trouble displaying a Base64 image inline or in css-file.
i'm using vs-2017.
Can someone point me in the right direction?
<!DOCTYPE html>
<html>
<head>
<title>Display Image</title>
<link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<img class="slide1" alt="" />
</body>
In that CSS file some simple code is written that loads the image.
.slide1 {
background: url(data:image/png;base64,iVBORw0KGgo)
}
the problem is the image can not loaded or display .
any advice
I have the following link to css file
<head>
<link rel="stylesheet" href="css/stylesheet.css" />
</head>
<body>
<img src="images/logo/logo.png" alt="pokemonroad logo" width="270px" height="135px" />
<img src="images/banner.png" class="banner"/>
</body>
its was working fine, but now can not see css/stylesheet.css in all browsers.
Use Chrome dev tools (right-click and choose "Inspect Element") to look for the stylesheet in the Sources tab. If you don't see it, go to the Network tab in Chrome Dev Tools and refresh the page. Look for red text that would indicate a failed file load.
That said, here's how you would typically add your stylesheet to your page if all is working well. First, you should put type="text/css" as an attribute on there. And more importantly, put it in the head of the document:
<html>
<head>
<link rel="stylesheet" href="css/stylesheet.css" type="text/css"/>
</head>
<body>
<img src="images/logo/logo.png" alt="pokemonroad logo" width="270px" height="135px" />
<img src="images/banner.png" class="banner"/>
</body>
</html>
maybe is missing type and media
the directory where you have yur CSS file must be a subdirectory of the file where you are calling
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" media="screen, print"/>
</head>
<body>
<img src="images/logo/logo.png" alt="pokemonroad logo" width="270px" height="135px" />
<img src="images/banner.png" class="banner"/>
</body>