I would like to add a picture in my code that is not from my computer, but from the web. Let's say that the link of the image is "www.image.test", how would the code be written? And, what if I want to hide a link behind that image?
Simple. The code would look like this. The <a href> will add a link to the image when clicked on, and the <img> tag will add the image from the appropriate image URL that you would specify.
<img src="http://www.image.test">
Related
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
Here is my problem :
I've try to add a "link" into another one. Explanation :
I have an image, which is inside a link, so when I click anywhere on this image I'm redirected to the page I want. What I'm trying to do is, to add a small "edit icon" at the top right corner of this image, so I can edit its properties on another page dedicated to this.
The fact is that I want to have this "edit icon" as a link, when I click on it I want to be redirected on another page, not the page which is the url of the main image container link...
so the code looks like this :
<a href...>
<span ... with style : size and background image so it looks like a clickable picture...>
<a href...>
<span... the second span with another background (edit icon), FLOAT RIGHT (to get it in the corner of the container span) and small sized...>
</span>
</a>
</span>
</a>
If I do things this way, the second block (edit icon) appears OUT OF the container...
and if I change my order. It sometimes appears but it's not clickable. What am i doing wrong? is it impossible to make links into links? or is it a special way to do that?
You can't place a link into an other one. You should place the links each after like this:
<div id="container">
<a id="show" href="link1.html"><div></div></a>
<a id="edit" href="edit.html"><div></div></a>
</div>
Here is an example for you :
http://jsfiddle.net/gXV73/1/
You can use two different images, one for the edit icon and one will be your main big image.
Put both the images in two different divs, and use position:absolute; and z-index:100; left:/*something*/; right:/*something*/ for the small edit image div.
or show me the code so that i can help better.
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
So I'm very confused and never seen something like this happen before. I have a simple link displaying an img in html. When I load my page, the img does not display. There is no CSS applied to the link or the img. Here's my code, I just need somewhere to start because I have no clue what the problem is.
<li>
<a class="dropDownGif" id="dropDownGifLink" href="#"><img src="../../images/darr.png" /></a>
</li>
EDIT:
When pulled up in chrome inspector the link shows the style as display:none; however this is written nowhere in my code, when I put css in to make sure it displays, it still automatically changes to display:none;. And the img path is correct, not sure how to change it to an absolute path though..
Thanks for all the help! hope this extra info helps.
Works fine must be the path to the image http://jsfiddle.net/YuqVu/
Check the served images and their location with inspect element on Chrome. You can right-click --> inspect element --> click on resources
There is nothing wrong with you code at all unless you apply some style. The problem must be your image path.
I am looking for the code to make this image http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg hover over this one http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg on a mouse over.
I am trying to link these to http://www.ciob-online-documents.co.uk/AnnualReview2010
Thanks for your help
P.S I have looked everywhere and tried all sorts of examples.
I am using a Drupal WYSIWYG editor in rich text.
Try to open HTML mode in your Drupal WYSIWYG editor. The code for changing an image on hover could be the following:
<a href="http://www.ciob-online-documents.co.uk/AnnualReview2010" title="">
<img src="http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg" alt="" onmouseover="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg';" onmouseout="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg'" />
</a>
So, when a user is going mouseover image element, it's src attribute will be changed to your second image. As soon as user mouseout src of the image will change again.
A link on the top of the image, is going to turn user to a page you mentioned onclick.