This line displays my logo:
<li><img class="logo" src="selector/logo.png" alt="" /></li>
How can I add a clickable link to this image?
Try this here:
<li>
<a href="target.html">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
You want properly also to remove the border around the image. To fix that use this CSS:
.logo {
border: 0;
}
Are you just asking how to make the image a hyperlink to itself? Like this?:
<li>
<a href="selector/logo.png">
<img class="logo" src="selector/logo.png" alt="" />
</a>
</li>
Related
I just started practicing HTML and some CSS,
while working on a task from the course i'm taking online I have encountered an issue with closing a div
I have created a .section3 on css
font-family: 'Handlee', cursive;
font-size: 13pt;
background-color: #fff;
padding: 15px;
margin-bottom: 10px;
border-radius: 10px;
and on the <body> i've created a span with a ul which has inside text and images along with an a href and the result looks as desired.
however, while trying to close the div I get the following error ```End tag (form) seen too early. Expected other end tag.
the code is as follows;
<div class="section2">
<h4><span>COMPLETED COURSES</span></h4>
<ul>
<li>
HTML on <strong>SoloLearn</strong> - <small>link to certificate</small>
</li>
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/" add target="_blank">
<img src="https://www.sololearn.com/Certificate/HTML/jpg/" width="100px" height="65px" alt="">
</a>
<li>
SQL on <strong>SoloLearn and Pluralsight</strong> - <a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/">
<small>link to certificate</small></a>
</li>
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/" add target="_blank">
<img src="https://www.sololearn.com/Certificate/HTML/jpg/" width="100px" height="65px" alt=""></a>
<!--error line--> </div>
I tried everything I could, please advice.
Thank you.
You did not close your <ul> tag. You should insert </ul> tag just before your </div>.
<div class="section2">
<h4><span>COMPLETED COURSES</span></h4>
<ul>
<li>
HTML on <strong>SoloLearn</strong> -
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/">
<small>link to certificate</small></a
>
</li>
<a
href="https://www.sololearn.com/Certificate/1014-6538353/pdf/"
add
target="_blank"
>
<img
src="https://www.sololearn.com/Certificate/HTML/jpg/"
width="100px"
height="65px"
alt=""
/>
</a>
<li>
SQL on <strong>SoloLearn and Pluralsight</strong> -
<a href="https://www.sololearn.com/Certificate/1014-6538353/pdf/">
<small>link to certificate</small></a
>
</li>
<a
href="https://www.sololearn.com/Certificate/1014-6538353/pdf/"
add
target="_blank"
>
<img
src="https://www.sololearn.com/Certificate/HTML/jpg/"
width="100px"
height="65px"
alt=""
/></a>
</ul>
<!--error line-->
</div>
First of all, inside a <ul> there can only be multiple <li> elements.
In your code your <a> elements are siblings to your <li>, try putting them inside.
Then you forgot to close your <ul> tag !
My advice for you is to keep your code indented, noticing missing tags will become easier.
I have a code
<ul class="catven">
<li><a target="_blank" href="http://" style="color:skyblue;text-decoration:none;margin-left:10px;">Abhijit Brew Tech Pvt Ltd</a></li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
So this code has a Link and an image i want the whole Ul to be clickable
Thanks,
You can put the entire UL inside an anchor Tag but for that you will have to remove the <a> tag inside which is there in your <li>
You cannot put another <a> tag inside an <a> tag, It will close all the <a>tags when it finds first </a>
for eg:
<a href="www.google.com">
This is before a tag of li closes
<ul class="catven">
<li><a target="_blank" href="http://" style="color:skyblue;text-decoration:none;margin-left:10px;">Abhijit Brew Tech Pvt Ltd</a></li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
This is after a tag of li closes
</a>
This will make only he first <li> or anything thats written between first <a> of google.com and end of </li> clickable
like below:
In order to make it work you will have to remove the inside the <a> tag
<a href="www.google.com">
This is before a tag of li closes
<ul class="catven">
<li>Abhijit Brew Tech Pvt Ltd</li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
This is after a tag of li closes
</a>
like below:
simply do add anchor tag out side the UL
like this :->
<a href="#"><ul class="catven">
<li><a target="_blank" href="http://" style="color:skyblue;text-decoration:none;margin-left:10px;">Abhijit Brew Tech Pvt Ltd</a></li>
<li><img src="http://localhost:8000" alt="" class="main-cat-img"></li>
</ul>
</a>
I have a problem with changing images by hover effect. Actually I can change image if the images are one on the top of the other but I need something different.
I need to change the images when I mouse over another image. Like;
<div id="gallery">
<div>
<img src="images/team-large.jpg" alt="Img">
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon">
</li>
</ul>
</div>
This is my HTML Code and I need to change
<img src="images/team-large.jpg" alt="Img">
this image when I mouse over the other sub images but I'm stuck.
Addition;
How can I change other images by onmouseover and onmouseout commands??
<div id="gallery">
<div>
<img src="images/team-large.jpg" id="Img1" name="Img1" class="Img1" alt="Img1" />
</div>
<ul>
<li>
<img src="images/elek2.jpg" alt="Img" title="Elektronik Alt Sistemler"
onmouseover="'#Img1'.src='images/elek3.jpg'" onmouseout="'#Img1'.src='images/team-large.jpg'">
</li>
<li>
<img src="images/su.jpg" alt="Img" title="Sualtı Akustik Sistemler" class="thumbnail">
</li>
<li>
<img src="images/yazılım.jpg" alt="Img" title="Yazılım, Bilgi Teknolojileri ve Simülasyon" class="thumbnail">
</li>
</ul>
</div>
I added the ID name to Img1 and tried to change the image when I mouse over 'images/elek2.jpg' but it doesn't work.
Thanks for help.
You could alter the background image using css's :hover instead. Something like:
div{
height:200px;
width:200px;
background:url("http://placekitten.com/g/200/200");
}
div:hover{
background:url("http://placekitten.com/g/200/400");
}
<div></div>
For what you're looking for, you might need the child or sibling selector:
.parent{
height:300px;
width:300px;
background: url("http://placekitten.com/g/300/300");
}
.child{
height:200px;
width:200px;
background: url("http://placekitten.com/g/200/200");
}
.parent:hover .child{
background: url("http://placekitten.com/g/200/300");
}
<div class="parent">
<div class="child"></div>
You may try this jQuery code to change source of main image
var original = $('#main').attr('src');
$('.thumbnail').mouseover(function()
{
var source = $(this).attr('src'); // retrieve image source of hovered image
$('#main').attr('src', source); // update main image source
})
.mouseout(function() {
$('#main').attr('src', original); // restore original image source
});
jsFiddle code (UPDATED)
In the linked snippet, I've assigned a main id to main image and a thumbnail class to other images. This allows to access them runtime via jQuery.
please give idea for multiple images is clickable using.
please, help in the following code.
<style type="text/css">
body {
background-image:url('Banner.png');
background-repeat:no-repeat;
background-size:auto auto;
}
</style>
<div>
<span style="position:absolute;left:10px;top:10px;">
<img src="logo.png" height="70px" width=""></span>
<span style="position:absolute;left:170px;top:10px;">
<a href="http://www.yahoo.com.in/" target="_blank" >
<img src="DM.png" height="70px" width="" >
</a>
</span>
</div>
your link is wrong
change http://www.yahoo.com.in/ to http://www.yahoo.co.in/
<a href="http://www.yahoo.co.in/" target="_blank" >
<img src="DM.png" height="70px" width="" >
</a>
your links are clickable
Js Fiddle
Everything is working fine in Chrome Version 37.0.2062.120 & Mozilla Firefox version 33.0 both the browswer
Just write http://www.yahoo.co.in instead of http://www.yahoo.com.in/
Here is the Demo:
jsfiddle.net/ob0oona2/3/
I'm trying to add a few images to my site but for some reason vertical bars are showing under and to the right of the images.
Here's my website URL: http://bit.ly/Lcspfp
The problem images are the brand logos at the bottom of the page.
Here's the code im using to display the brand logos:
<ul id="brands">
<li><a><img src="images/brand1.png" alt="" /></a></li>
<li><a><img src="images/brand2.png" alt="" /></a></li>
<li><a><img src="images/brand3.png" alt="" /></a></li>
<li><a><img src="images/brand4.png" alt="" /></a></li>
<li><a><img src="images/brand5.png" alt="" /></a></li>
<li><a><img src="images/brand6.png" alt="" /></a></li>
<li class="last"></li><p>
</ul>
Here's an image of the images with the vertical bars that I dont want there: http://i.imgur.com/9g1do.png
Add this CSS rule:
ul#brands a {
background:none;
}
Change line 644 of your styles.css file to the following:
.footer ul a { padding-right:5px; margin-right:3px; }
Delete this CSS-rule :
background: url(../images/links_separator.gif) no-repeat 100% 50%;
It creates those vertical lines.