How to make clickable gif and make it link to somewhere? - html

So I have an ambitious idea on something I want to do specifically and want to know the best way to carry it out or if it's even possible.
I want it so when I hover over one of the tabs it plays a gif animation (like some arrow or something) once then leaves it in that last frame (so it doesn't continuously loop then is clickable.
I doubt my code will be any help at all but I'll leave it here anyway (I know it's messy and that I should fix it but I'm sorta new to this.)
<!DOCTYPE html>
<html lang="en-US">
<html>
<style>
head {
background-color: white;
}
span.mainbar {
display: inline-block;
margin-left:10px;
margin-top:3px;
}
span.text {
display: inline-block;
float:right;
margin-right:25px;
margin-top: 27px;
}
span.bar
{
display: inline-block;
float:right;
margin-right:25px;
margin-top: 20px;
}
span.facebook {
display: inline-block;
float:right;
margin-right:30px;
margin-top: 22px;
}
span.instagram{
display: inline-block;
float:right;
margin-right:22px;
margin-top: 22px;
}
span.twitter{
display: inline-block;
float:right;
margin-right:30px;
margin-top: 16px;
}
</style>
<head>
<title> The Project </title>
<link rel="shortcut icon" href="images/favicon.ico"/>
<span class="mainbar">
<a href="Homepage.html">
<img src="images/Temp Text Logo.png" alt="Main Logo" style=";border:0;">
</a>
</span>
<Span class="twitter">
<a href="https://www.twitter.com"target="_blank">
<img src="images/twitter.png" alt="twitter page"
style="width:50px;height50px:;border:0;">
</a>
</span>
<Span class="instagram">
<a href="https://www.instagram.com"target="_blank">
<img src="images/instagram.png" alt="instagram page" style=";border:0;">
</a>
</span>
<Span class="facebook">
<a href="https://www.facebook.com"target="_blank">
<img src="images/facebook.png" alt="facebook page" style=";border:0;">
</a>
</span>
<span class="bar">
<img src="images/bar.png" alt="bar" style=";border:0;">
</a>
</span>
<span class="text">
<a href="about.html">
<img src="images/about.png" alt="about" style=";border:0;">
</a>
</span>
<span class="text">
<a href="shop.html">
<img src="images/shop.png" alt="shop" style=";border:0;">
</a>
</span>
<span class="text">
<a href="Homepage.html">
<img src="images/home.png" alt="Home" style=";border:0;">
</a>
</span>
</head>
<body>
<hr>
</hr>
</body>
</html>
Tab example pic


All you need to do to make an image clickable is to wrap the image in a hyperlink parent:
<a href="http://www.google.com">
<img src="http://placehold.it/100">
</a>
As for only allowing the link to be clickable after the animation has played, it would theoretically be possible through JavaScript, but I wouldn't recommend that. The only way to do it would be with a timeOut, and you would possibly encounter a state where the timing gets out of sync.
Instead of this, I would recommend using a sprite map instead of a GIF.
Hope this helps! :)


You can't control animated gif without javascript/jquery control.
With 2 image, one static and one animated and control the start of animation with jquery, like this solution: Stop a gif animation onload, on mouseover start the activation
Using jquery plugin like this: http://rubentd.com/gifplayer/

Related

Align images with text baseline in <div>

I have a CGI script that creates a "navigation aid" consisting of arrow icons and text label like this:
Obviously it would look much better if the text baseline would align with the bottom of the arrow icons.
The arrow icons were copied from GNOME 16x16 arrow actions a few years ago.
The HTML code is this:
<div><a title="Erster Eintrag" href="#A0"><img alt="|<" src="/ig16a/go-first.png" class="toolbar"></a> <img src="/ig16a/go-previous.png" alt="<" class="toolbar"> <span class="navaid">2 von 29</span> <img src="/ig16a/go-next.png" alt=">" class="toolbar"> <img alt=">|" src="/ig16a/go-last.png" class="toolbar"></div>
The CSS used is:
body {
color: black;
}
.navaid, .toolbar {
font-size: small;
font-family: sans-serif;
background: #fffab7;
margin-top: 1ex;
margin-bottom: 1ex;
}
If someone wonders about the different classes:
The idea was to hide the arrow icons when printing the page...
In case someone needs the arrow icons (Sorry for the length!):
# tar czf - icons | uuencode icons.tar.gz
begin 644 icons.tar.gz
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
5````````````^/?X$XK8#%``H```
`
end

Use vertical-align: top | middle | bottom; in your CSS to align vertically.
Also ensure you use display: inline-block; in your CSS to align to the top / bottom of your images correctly.
Note: You can also use display: inline-flex | inline-grid;. See MDN for details of display options.
body {
color: black;
}
.navaid,
.toolbar {
font-size: small;
font-family: sans-serif;
background: #fffab7;
margin-top: 1ex;
margin-bottom: 1ex;
}
.nav a {
text-decoration: none;
}
.nav-top .navaid,
.nav-top .toolbar {
vertical-align: top;
display: inline-block;
}
.nav-middle .navaid,
.nav-middle .toolbar {
vertical-align: middle;
}
.nav-bottom .navaid,
.nav-bottom .toolbar {
vertical-align: bottom;
display: inline-grid;
}
<p>Align Top</p>
<div class="nav nav-top">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Align Middle</p>
<div class="nav nav-middle">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Align Bottom</p>
<div class="nav nav-bottom">
<a title="Erster Eintrag" href="#A0">
<img alt="|<" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Gnome-go-first.svg/48px-Gnome-go-first.svg.png" class="toolbar" />
</a>
<a href="#A0" title="Vorheriger Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Gnome-go-previous.svg/48px-Gnome-go-previous.svg.png" alt="<" class="toolbar" />
</a>
<span class="navaid">2 von 29</span>
<a href="#A2" title="Nächster Eintrag">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Gnome-go-next.svg/48px-Gnome-go-next.svg.png" alt=">" class="toolbar" />
</a>
<a href="#A28" title="Letzter Eintrag">
<img alt=">|" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Gnome-go-last.svg/48px-Gnome-go-last.svg.png" class="toolbar" />
</a>
</div>
<p>Some text</p>
Remove side note concerning frameworks

maybe try adding this to your CSS:
.toolbar{
margin-bottom: 0;
}

Why is the border only adding around the first <li> item despite all <li> items being in the <aside> element

Here is the HTML and then the CSS. As you can see the aside is covering all the li items. The CSS is using the aside tag to add the border around all of these elements, but it is only adding a border around the first li item. I have tried adding a separate aside element around each li to overcome this but this didn't work. I have inspected using chrome dev tools and couldn't understand why this is happening.
<aside>[enter image description here][1]
<h5><strong>Related posts</strong></h5>
<ul>
<li class="related-post">
<img
src="img/mantyping.jpg"
alt="mantyping"
width="100"
height="70"
/>
<div>
<a href="Howtolearnwebdevelopment.html" class="related-link"
>How to learn web development</a
>
<p class="related-author"><strong>By Jonas Schmed</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/csspower.jpg"
alt="lightning"
width="100"
height="70"
/>
<div>
<a href="Unknownpowersofcss.html" class="related-link"
>The unknown powers of css</a
>
<p class="related-author"><strong>By Jim Dillon</strong></p>
</li>
</div>
<li class="related-post">
<img
src="img/javascriptcode.png"
alt="javascript code"
width="100"
height="70"
/>
<div>
<a href="javascriptisawesome.html" class="related-link"
>Why Javascript is awesome</a
>
<p class="related-author"><strong>By Matilda</strong></p>
</li>
</div>
</ul>
</aside>
aside {
background-color: #f7f7f7;
border-top: 5px solid #1098ad;
border-bottom: 5px solid #1098ad;
padding: 50px;
width: 500px;
}````
[1]: https://i.stack.imgur.com/1hIls.png

I am not sure if you are looking forward to adding a border to all list items or want to add a border to the entire aside. In this solution, I'm showing how you can add borders to each list of items. If you want to add a border to the entire <aside>, just replace the .related-post class with aside. Be careful about the code formatting with correct opening and closing tags, else it may break the UI.
/* aside { */
.related-post {
background-color: #f7f7f7;
border: 5px solid #1098ad;
padding: 50px;
width: 500px;
list-style-type: none; /* It removes the bullet */
}
<aside>
<h5>
<strong>Related posts</strong>
</h5>
<ul>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/smiling-young-man-sit-table-600w-1939452445.jpg" alt="mantyping" width="100" height="70" />
<div>
How to learn web development
<p class="related-author">
<strong>By Jonas Schmed</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-vector/vector-illustration-abstract-electric-lightning-600w-1706216764.jpg" alt="lightning" width="100" height="70" />
<div>
The unknown powers of css
<p class="related-author">
<strong>By Jim Dillon</strong>
</p>
</div>
</li>
<li class="related-post">
<img src="https://image.shutterstock.com/image-photo/digital-technology-software-development-concept-600w-2111828198.jpg" alt="javascript code" width="100" height="70" />
<div>
Why Javascript is awesome
<p class="related-author">
<strong>By Matilda</strong>
</p>
</div>
</li>
</ul>
</aside>
Hope it helps.

How do I refine this code for an email signature?

I am trying to create an email signature using html and an image I designed in Photoshop. I have sliced the image in PS and saved the slices out onto my PC. I now want to add links to certain slices and have managed to do this but the code is very messy and poor so I know that there is a better way to do it. I have attached the code below.
The links are not the actual links and are just placeholders for now. I also know that I need to save the images externally and will get round to it but just want to try and get the code sorted for now. I also understand that the image size is massive for an email signature so can I just add a "max-width" and "max-height" to the code to size it down or do I have to individually change all the sizes of each slice?
Finally, will this a spliced html image display well as an email signature or, because there are so many images attached to it, will it just go straight into spam?
<!DOCTYPE html>
<html>
<style>
div {
position: absolute;
}
</style>
<head></head>
<body>
<a href="" />
<div style="background-image:url('img/img1.jpg'); left:0px; top:0px; width:2000px; height:122px"></div>
<a href="" />
<div style="background-image:url('img/img2.jpg'); left:0px; top:122px; width:124px; height:222px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img3.jpg'); left:124px; top:122px; width:866px; height:198px"></div>
<a href="" />
<div style="background-image:url('img/img4.jpg'); left:990px; top:122px; width:1010px; height:102px"></div>
<a href="" />
<div style="background-image:url('img/img5.jpg'); left:990px; top:224px; width:246px; height:576px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img6.jpg'); left:1236px; top:224px; width:630px; height:120px"></div>
<a href="" />
<div style="background-image:url('img/img7.jpg'); left:1866px; top:224px; width:134px; height:576px"></div>
<a href="" />
<div style="background-image:url('img/img8.jpg'); left:124px; top:320px; width:866px; height:24px"></div>
<a href="" />
<div style="background-image:url('img/img9.jpg'); left:0px; top:344px; width:122px; height:456px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img10.jpg'); left:122px; top:344px; width:540px; height:150px"></div>
<a href="" />
<div style="background-image:url('img/img11.jpg'); left:662px; top:344px; width:328px; height:456px"></div>
<a href="" />
<div style="background-image:url('img/img12.jpg'); left:1236px; top:344px; width:630px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img13.jpg'); left:1236px; top:386px; width:48px; height:414px"></div>
<a href="https://www.bing.com" />
<div style="background-image:url('img/img14.jpg'); left:1284px; top:386px; width:482px; height:56px"></div>
<a href="" />
<div style="background-image:url('img/img15.jpg'); left:1766px; top:386px; width:100px; height:414px"></div>
<a href="" />
<div style="background-image:url('img/img16.jpg'); left:1284px; top:442px; width:482px; height:42px"></div>
<a href="" />
<div style="background-image:url('img/img17.jpg'); left:1284px; top:484px; width:62px; height:316px"></div>
<a href="https://www.linkedin.com" />
<div style="background-image:url('img/img18.jpg'); left:1346px; top:484px; width:94px; height:90px"></div>
<a href="https://www.facebook.com" />
<div style="background-image:url('img/img19.jpg'); left:1440px; top:484px; width:60px; height:82px"></div>
<a href="https://www.twitter.com" />
<div style="background-image:url('img/img20.jpg'); left:1500px; top:484px; width:94px; height:90px"></div>
<a href="https://www.instagram.com" />
<div style="background-image:url('img/img21.jpg'); left:1594px; top:484px; width:92px; height:82px"></div>
<a href="" />
<div style="background-image:url('img/img22.jpg'); left:1686px; top:484px; width:80px; height:316px"></div>
<a href="" />
<div style="background-image:url('img/img23.jpg'); left:122px; top:494px; width:540px; height:30px"></div>
<a href="" />
<div style="background-image:url('img/img24.jpg'); left:122px; top:524px; width:2px; height:88px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img25.jpg'); left:124px; top:524px; width:418px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img26.jpg'); left:542px; top:524px; width:120px; height:276px"></div>
<a href="" />
<div style="background-image:url('img/img27.jpg'); left:1440px; top:566px; width:60px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img28.jpg'); left:1594px; top:566px; width:92px; height:234px"></div>
<a href="" />
<div style="background-image:url('img/img29.jpg'); left:1346px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img30.jpg'); left:1500px; top:574px; width:94px; height:226px"></div>
<a href="" />
<div style="background-image:url('img/img31.jpg'); left:124px; top:586px; width:418px; height:26px"></div>
<a href="https://www.google.com" />
<div style="background-image:url('img/img32.jpg'); left:122px; top:612px; width:406px; height:62px"></div>
<a href="" />
<div style="background-image:url('img/img33.jpg'); left:528px; top:612px; width:14px; height:188px"></div>
<a href="" />
<div style="background-image:url('img/img34.jpg'); left:122px; top:674px; width:406px; height:126px"></div>
</body>
</html>

Email is not web! Absolute positioning is an advanced trick that requires lots of hacks to work, and even <div>s are problematic, for Outlooks. Background images are also very tricky (there are plenty of answers on SO about these things individually).
Nobody knows all the spam rules, because otherwise people would subvert them, however, having so many links at the bottom of your message could easily be considered spammy. It's also risky because it's not normal. So I would advise against this method.
You will want to produce a HTML table, with <img>s (or just one image). However, best practice is to write out text in HTML, rather than have it in the image. I can't see the image so I can't give you sample code, other than something generic for a scalable image:
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#">
<img src="https://via.placeholder.com/600x200" width="600" style="max-width:100%;height:auto;" />
</a>
</td>
</tr>
</table>
</body>

How to make header logo clickable?

Please give me instructions how to fix some Blogger codes. I just made an image logo and put it beside my blog title (behind title and description/using awesome template). I got successful making the blog title clickable, but no success in finding how to make the image logo clickable. I also tried putting my URL in
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
still not changing.
I tried changing it in the Chrome console using this code it worked, but I don't know how to fix it in the source html.
<a href="#">
<div id="header-inner
</a>
I inspect the page and tried some CSS codes but only made me more confused. Please give me some instructions how to fix...Big big thanks to all.
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + "_headerimg"'
expr:src='data:sourceUrl' expr:width='data:width' style='display:
block'/>
</a>
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
element.style {
background-image: url(//3.bp.blogspot.com/-
yjBU04mgpNw/W0l9tFJDjEI/AAAAAAAADRw/-
uOagCGc3cIhBSJsH3Zl4RetnKK_iuhUQCK4BGAYYCw/s1600/101bloggertips-logo.png);
background-position: left;
width: 120px;
min-height: 37px;
_height: 37px;
background-repeat: no-repeat;
}

You can add a div element to specifically target a smaller zone around your image and not the whole header.
Try replacing :
<a href="#">
<div id="header-inner
</a>
With :
<div class="header-inner>
<div class="logo-container">
<a href ="#">
<img src="Your image url" class ="logo_header" alt="My Logo">
</a>
</div>
</div>
Then you can add some css using your logo_container and logo_header classes as follow :
.logo_container {
width:200px;
height:auto;
display: block;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
}
.logo_header {
width:200px;
height:auto;
}
Hope it helps !

How do I get a picture (flag) in the same line as some text?

Probably a stupid question, but how can I get an image (in this case a flag) in the same line as some text see image?
My HTML code so far:
<h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/30px-Flag_of_France.svg.png" alt="France" height="13px" width="20px"> FRA
</h4>

Try this:
img {
height:20px;
width:30px;
display: inline;
}
span {
display: inline;
height:20px;
color: blue;
}
<img src="http://www.defendersofthescroll.com/images/franceflag.gif" />
<span>
FRA
</span>

Changes based on your code:
<h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/30px-Flag_of_France.svg.png" alt="France" height="13px" width="20px" display="inline"> <span display="inline">FRA</span>
</h4>

<html>
<body>
<span><h4><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Flag_of_France.svg/30px-Flag_of_France.svg.png" height="10px" width="10px">fra </h4></span>
</body>
</html>