i have the code below
<a id="treeSelector" style="cursor:pointer" >
<img src="../../graphics/tree.gif" align="left" style="padding-right:5px;"/>
<span>Root Page</span>
<img src="../../graphics/arrow_down.gif" align="absmiddle"/>
</a>
My Problem is that using the span inside when mouseover the cursor form pointer becomes default arrow moving from arrow_down.gif to Root Pag text.
I know that if i use dislpay:block on will solve my problem BUT this not what i want because link has onmouseover show another div.
Can anyone help me
Thanks
There are 2 really easy solutions.
Use HREF
...
Use CSS
#treeSelector, #treeSelector *{ cursor:pointer }
<span style="cursor:pointer;">
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.
I need to create a button with this image https://www.thebankofmaine.com/images/android-app-on-google-play.png and I need to reference it to a file on my server.
How can I do that ?
I've tried this and the image appears, but dont know how to go to a webpage after clicking.
<button type="button" onClick="location.href='index.html'">GO TO URL</button>
How can I change it to go to google.com for example and how can I add a img to the button?
<img src=" https://www.thebankofmaine.com/images/android-app-on-google-play.png" />
I dont exactly get what you are trying to do, but it seems to me that you are just simply trying to make an image a link to click on to lead you somewhere else. This can be done with:
<a href="yourlinktogoto">
<img src="yourpicture.gif" alt="Picture Description" style="border:0">
</a>
You have to change the src, href, and alt.
You dont have to add the border thing but i put it in almost all my images.
Hopefully it will help. tnx
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
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'">
I got this html
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
When in firefox I am unable to remove the a.tgt using backspace. Gets removed in all other browser except firefox
Whats the problem?
This may be helpful for some. I ran into the same problem.
Instead of this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a> great </div>
You can have this:
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false">harry</a><span class="remove"></span> great </div>
You can use javascript (using jquery in this case) to detect the deletion of .remove and remove your uneditable div at the same time:
// you can wrap this in an if statement and only execute in firefox
$('.remove').on("DOMNodeRemoved", function() {
$(this).prev(".tgt").remove();
});
Hope this helps!
try to wrap <a> html into span tag with attribute contenteditable=true
<div contenteditable="true"> Hey <a class="tgt" contenteditable="false"> <span contentEditable="true">harry</span></a> great</div>