I have the following image of a trophy on my main page and I would like to make a small description appear when a user hovers over it just as on this site. When I hover over the icons on the top right, I can see some description. Is this done through onclick? It looks neater than just having a paragraph description....
It would be done using onMouseOver to call the function to display or update the element that shows the description. See below example
<a href='link.html' onMouseOver='showDescription();'><img src='icon.png'></a>
Hope this helps
You can do this with the title attribute.
<img src="https://unsplash.it/50" title="some text">
Related
i want to decorate my website and add a few images of egyption gods with a button below them, so when you click on the button that says the name of the god, their descriptions will be displayed. I also want to toggle the themes of my website where by clicking the toggle them button, my whole enter website theme will changed
im kinda strugging with css and whatever background colour im setting it too, the website is not changing so any help with that would be appreciated <3.
here is my base code:
enter image description here
Not much to go on with the code however I could give some advice on how I would go about doing it. I would go about implementing this:
<div>
<img src='image.png'>
<p class='hidden'> this is the description </p>
<button>Show/Hide description </button>
</div>
You will have each image with its own description and button in a div and the description will be hidden by default. Add a event listener to the button so onclick it will add/remove the hidden class to show/hide the description.
I want to make a button with the discord logo but when I try to add the anchor tag the text goes down a bit and it becomes uncentered.
Is there a way to fix this or a different way I should be approaching this?
HTML Code:
<li class="nav__btn">
Join our Discord
</li>
Try reading this to see if it could help out.
https://coder-coder.com/how-to-center-button-with-html-css/
I would assume it would work the same way with an image button. Also try experimenting with div tags.
You have mistake in your code here: "button" >< img class.
Better use button tag for this, see example button with icon.
Also, provide some screenshot what exactly do you need.
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.
Suppose I have a link <a href="#" title="Hello, World!">. I want to style parts of the title tooltip attribute. For example, I want to have the Hello part be bold. I'm not trying to style both Hello and World, just the Hello part.
I have tried putting HTML tags inside of the attribute, but they appear to have no effect (if I enter <a href="#" title="<b>Hello,</b> World!">, the title text prints out <b>Hello,</b> World!, which is not what I want. I have made a JSFiddle demo of what happens.
Is it possible to do this using pure CSS?
Also, I have seen this, but it's not what I wanted. It's close, however.
You can't put HTML in the attribute title, it's not a valid code but I beleive you can use hint.css library: http://kushagragour.in/lab/hint/. Completely css-based and easy-to-use:
Your link
I think the only way for you to achieve what you want is to make a div with the style you want, hide it, and on hover - show it.