I have a website set up at http://jamesfrewin.co and I have tried to make the small envelope icon have the link for mailto work just on the envelope image but it seems to be overflowing to the whole box.
Any help to sort this out would be greatly appreciated.
http://jsfiddle.net/JzEnm/
Code
The code for my page is on the link above.
Thanks!
This is happening because your anchor tag includes the envelope image, profile image and the text. Close the tag after the envelope image. Change this and you should be good to go.
<a href="mailto:jfrewin#me.com"><img class="image image-5" src="images/Envelope1.png" onmouseover="this.src='images/Envelope2.png'" onmouseout="this.src='images/Envelope1.png'">
<img class="image image-6" src="images/Profile Card.svg">
</a>
The answer you're looking for has been provided by #James. Just missing an ending anchor tag.
From someone who appreciates good, clean code and following best practices, I challenge you to strip your hover events and replace them with sprites and css :hover effects.
Add </a> after <img alt="" class="image image-5" src="images/Envelope1.png" onmouseover="this.src='images/Envelope2.png'" onmouseout="this.src='images/Envelope1.png'">
Related
Good morning,
In HTML, I am trying to insert an image which should be clickable to open a link. Unfortunately, when I click on the image, nothing really happens. I am doing that in a 'div' tab, hoping that it is the correct way to achieve this.
<div id="nav">
<a href="http://www.20minutes.ch">
<img src="assets/icons/icon_weather_forecast.png" alt ="" style="width:60px;height:60px;">
</a>
<img src="assets/icons/icon_worldwide_weather.png" alt ="" style="width:60px;height:60px;">
<img src="assets/icons/icon_train_schedule.png" alt ="" style="width:60px;height:60px;">
<img src="assets/icons/icon_useful_numbers.png" alt ="" style="width:60px;height:60px;">
</div>
Any idea why it does not work?
Many thanks for your hints and best wishes,
Laurent
If you use JSBin, or any similar tool, you'll see how your code works perfectly. Have you tried to use different browsers? Also you could try removing the id from the div to see if you have any CSS rule or JS that interrupts the anchor action.
Thanks a lot for your help. I found the problem which was in my css.
My tag did not mention :
position: relative;
Adding this line solved the problem. Again, many thanks for your efforts.
Okay so i just started a Tumblr blog the other day, and when i was editing the profile page i had happily found a edit with HTML button, and i thought wow now i can finally loose this (image below) that's intruding on my theme.
So, I hit CTRL + F to find code relating to the shape, and found that the shape was actually a fill rather than a preset image, so i entered the hex code for a transparent black #00000000), but to no avail, it didn't work, and after about an hour or so of scouring the web, I decided to reach out, and was possibly hoping that someone with HTML experience could help, anyways here's the code
Right the background you should be able to change within your template settings as this is just a background you need to change. This is not something within the HTML template - I am not sure how to change background in Tumblr but look within profile or theme settings, widgets or block.
Use inspect element and you will see this:
.header-image.cover {
background-image: url(http://static.tumblr.com/d3c51755c609fd193d623381320efcb6/kcvyami/oSJnx6juu/tumblr_static_tumblr_static_jqy1bj0w774s0o04wc4wsskc_focused_v3.gif);
}
The image that you are looking for is found here:
http://static.tumblr.com/d3c51755c609fd193d623381320efcb6/kcvyami/oSJnx6juu/tumblr_static_tumblr_static_jqy1bj0w774s0o04wc4wsskc_focused_v3.gif
If you're looking to delete the doge image, then delete this from the HTML:
<figure class="avatar-wrapper animate">
<a href="/" style="background-image: url(http://33.media.tumblr.com/avatar_e1fbc1eda419_128.png)" class="user-avatar">
<img src="http://33.media.tumblr.com/avatar_e1fbc1eda419_128.png" alt="" class="print-only invisible">
</a>
</figure>
My website: cultpops.com
I'm trying to get the top left logo on my site to link to the 'about' portion on my page. As per another stackoverflow topic, I placed [a href="#about"][/a] around said logo and [a id="about"][/a] around said portion. What am I missing here?
I see you really put [a id=”about”] in your code. This is not an html tag. html tags always are like this <htmltag> and not with square brackets
If you want to link to an anchor you just need to give an id to the html element you want (doesn't have to be an <a> tag).
The easiest way to do this is for example on the image above your about section.
Set your editor to text instead of visual and add an id to your image or the a tag around it. It will look like this.
<a href="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" id="about">
<img class="alignnone size-full wp-image-97" src="http://www.cultpops.com/wp-content/uploads/2015/05/logo21.png" alt="logo2" width="97" height="133">
</a>
Place the following around the "img src="example.com/image.png" tag:
<a href="http://example.com/youraboutpage">
<img src="example.com/image.png">
</a>
I can see you are using wordpress -the logo image tag is in your header.php file available in Appearance>Editor
Hope this helps
Admin Alex
having trouble with a CSS problem, but I can't figure it out. none of my images are displaying, yet they have working urls and the HTML is correct.
there's no image styling, and the image class's only styling is: .postimg { width: 100%; }
problem here:
http://jsfiddle.net/4pmUu/5/
this probably has a really simple solution, but i can't figure out what's wrong..
You do not have the correct image tag. To show an image in HTML use the <img> tag.
see http://jsfiddle.net/4pmUu/7/
As far as I can tell, you just have the image tag wrong. <i> is italic text; you want <img> instead. That is, <img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" />
If you substitute <i ...></i> and use it (below) it should work.
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"/>
You are using the image tag as:
<i src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"> this is where the actual error it.
The correct way to do is to write <img... use this:
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" alt="photo" />
Also please note that, using alt="" is necessary in images, as if the image is not loaded because of some issue, the user will be shown a text about that image.
How can i display an image with a direct link (such as "http://www.utexas.edu/courses/mis325/hw/hw11a.gif") when coding with asp/vb?
I don't understand the question. Like this?...
<img src="http://www.utexas.edu/courses/mis325/hw/hw11a.gif" alt="" border="0">
You didn't say where it should link to, so I assumed to the same image?
Also, this is a plain HTML link, not sure what you mean by how to do it in ASP/VB