I have this problem with my navigation bar. I have 5 .png buttons horizontaly aligned. I want to give them rollover in CSS, not JAVA.
I tried so many things but just can't seem to control it. Al the ways I tried, it wont even load the images... I don't know what to do :) I already placed them in 1 big div. Here's my code:
<div id="img">
<a id="anchor1" href="index.php" ></a>
<img src="images/nav/spacer.png" alt="" class="btn"/>
<a href="portfolio.php">
<img src="images/nav/portfolio_btn.png" name="portfolio" width="128" height="51" border="0" class="btn" id="portfolio" alt="" />
</a>
<img src="images/nav/spacer.png" alt="" class="btn"/>
<img src="images/nav/diensten_btn.png" name="bestellen" width="125" height="51" border="0" class="btn" id="diensten" alt="" />
</div>
I suggest you look into CSS sprites. Here's an example tutorial for a menu: http://praveenfrancis.com/tutorials/create-a-simple-menu-with-css-sprite/
Try putting images inside of a <a></a> then in CSS declare something like this:
a hover{
background://what you want;
}
Related
On a website I am building, the onmouseover/out feature is working, however the initial image that is meant to be there won't load and will instead show a blank image link like it's trying to find it. When I do mouseover, the pictures load and are fine from then on.
I've tried changing the image it tries to load initially (which is definitely in the right place as it's one of the onmouseover/out pictures that functions correctly), but it still won't load.
<header class="masthead text-center">
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img class='img-responsive center-block' src="/images/people/MinION" width="500">
<a href="https://team-schwessinger.github.io/Team_B_S/" />
</div>
<img class='img-reponsive center-block' img src="images/people/MionION.png" width="500" alt="Leaf" onmouseover="this.src='images/people/Leaf.jpg';" width="500" onmouseout="this.src='images/people/MinION.jpg';" width="500" /></a>
I believe I am having an issue with
<img class='img-responsive center-block' src="/images/people/MinION" width="500">
which is meant to be there when the website loads, before any mousing occurs. The website recognises it is trying to find a picture, but can't. I am confused about this as it is able to find and use that MinION picture in the actual mouseover function.
Any help in understanding why this is happening is greatly appreciated, thank you!
Change your syntax as below, I have changed image links for me to work but you can use your relative paths.
<header class="masthead text-center">
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<a href="https://team-schwessinger.github.io/Team_B_S/" />
<img class='img-responsive center-block'
src="https://timedotcom.files.wordpress.com/2015/09/googles-new-logo-
5078286822539264-2-hp.gif" width="500">
</div>
<a href="https://team-schwessinger.github.io/Team_B_S/">
<img class='img-reponsive center-block' img
src="https://timedotcom.files.wordpress.com/2015/09/googles-new-logo-
5078286822539264-2-hp.gif" width="500" alt="Leaf"
onmouseover="this.src='http://www.google.com/logos/doodles/2016/st-
patricks-day-2016-4834639321497600-hp2x.gif';" width="500"
onmouseout="this.src='https://timedotcom.files.wordpress.com/2015/09/googles-new-logo-5078286822539264-2-hp.gif';" width="500" />
</a>
refer to jsFiddle
Not sure why, but none links over the images in my posts works unless it's set to position: absolute;
Summary:
No problems with neither src or href
The pointer cursor does not appear
Nothing happens when clicking on the image
The links works when I set a to position: absolute;, but then everything is misplaced and so on.
I have tried shortening it up to make it easier to debug.
Shorten HTML
<a href="#.jpg">
<img src="#.jpg" alt="Alt text" width="1200" height="800">
</a>
(Shortened) Complete HTML
<div class="clearfix"></div>
<div class="holder blacktext bildeserieholder">
<div class="container">
<div class="row">
<div class="col-md-12 centertext">
<img class="aligncenter size-full wp-image-512" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-513" src="#.jpg" alt="text" width="600" height="900" />
<img class="aligncenter size-full wp-image-514" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-515" src="#.jpg" alt="text" width="1200" height="800" />
<img class="aligncenter size-full wp-image-516" src="#.jpg" alt="text" width="600" height="900" />
</div>
</div>
</div>
</div>
</div>
I have tried:
Using cursor: pointer to the link attribute.
Removing all img classes
Removing all CSS on both images and links in Chrome Inspect Element
It's hard to find out where I have done something wrong, so I would really recommend checking out the page: http://goo.gl/DqXAlC
Maybe not relevant, but I will add this information anyways regarding what I am using:
Wordpress
Bootstrap
Types (custom posts etc plugin)
The images are being uploaded with Types within each posts in a WYSIWYG editor called "bildeserie". In my single PHP I have the following which echos the images:
<?php echo(types_render_field( "bildeserie", array( 'raw' => true) )); ?>
Do you have a working solution or any ideas?
Note: The problem is with the images below the header and all the text.
Solutions:
.holder img {
pointer-events: none;
}
The above is disabling the link on the image, commenting it out will make everything work.
Second solution:
a {
display:inline-block;
}
That also fixes your problem (by expanding the link to the dimensions of the image).
I would imagine that the img has a size and the link does not have a size unless set to absolute. If the a doesn't have a size, you aren't clicking on the a you are clicking on the img, give the a a size and see what happens
You should disable this line in your style.css file:
.holder img {
pointer-events: none;
}
Here I have a weebly website, but I'm trying to make my own website and implement some of the features from the weebly website to my own.
I was wondering what this feature is called and how I would implement it:
As you can see when you hover over an image a little floating tag appears, and I was just wondering if someone could tell me what it is and how I would implement it into my code:
Here is the code:
HTML
<div id="staff_images">
<center>
<img src="images/GR412.png" />
<img src="images/JoeVis.png" />
<img src="images/Scott.png" />
<img src="images/Halo.png" />
</center>
</div>
Add title=" " to your images... with the name inside the " ". That should do it.
Like this:
<img src="images/GR412.png" title="GR412" />
<img src="images/JoeVis.png" title="JoeVis" />
<img src="images/Scott.png" title="Scott" />
<img src="images/Halo.png" title="Halo" />
DEMO
I am trying to create a link section in a HTML document. I have a couple links containing images. The code is here: http://jsfiddle.net/u6Tmt/. As you can see after the SO image there is a little black bar which looks almost like an underscore. What is causing this black bar to appear and how do I get rid of it?
In case you don't know what I'm talking about, here is an image to help:
Also here is another copy of the code:
<div id="links">
<a href="http://stackoverflow.com/users/1916721/cabellicar123">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="stack overflow">
</a>
<a href="https://github.com/cabellicar123">
<img src="https://assets-cdn.github.com/favicon.ico" alt="github">
</a>
</div>
The bar is the default underline of hyperlinks.
Add this rule to your CSS stylesheet to get rid of it
DIV#links A { text-decoration: none; }
I wouldnt have thought it an issue but if you change
<img src="image URL" alt="stack overflow">
to
<img src="image URL" alt="stack overflow"/>
and remove all spaces in the
<A>
your fiddle fixes
Edit: This & cobra_fast's answer
There seems to be a space in your first a-tag and the hyperlink is underlining it. When you use the a-tags with images, put it on the same line and it seems to work:
<div id="links">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" alt="stack overflow">
<img src="https://web.archive.org/web/20190109105720/https://assets-cdn.github.com/favicon.ico" alt="github">
</div>
I have - img id="logo" SO I can have my logo on my website, the full code for it being:
<img id="logo" src="nsc/logo2.png" alt="logo" />
How can I link this logo image using <a href=""> ???
I've tried many different ways but they don't work :/
<img id="logo" src="nsc/logo2.png" alt="logo" />
It would be nice to embed in a link tag. :)
<a href="your.html">
<img id="logo" src="nsc/logo2.png" alt="BrandLog" />
</a>
it's clean and no need of javascript :)
It's super simple, just wrap the <img> tag with an anchor tag <a>:
<a href="myUrl.html">
<img id="logo" src="nsc/logo2.png" alt="logo" />
</a>
This will turn the entire image into a link for you :)
For people who want to receive click event on a tag instead of img tag
<a href="/chat" style="background: red; display: inline-block;">
<img src="chat.svg" style="pointer-events: none; display: block;" width=40 height=40>
</a>
On a tag
display: inline-block in a: allows to set a width and height on a tag
On img tag
display: block: help remove extra space below the image
pointer-events: none: ignore click on img, click event will fired on a tag
If you can't wrap the image in a link, an image map should work just as well without requiring JavaScript & without needing to wrap the element.
I add id in img tag like this:
<img id={logo.id} src={logo.url} onError={this.handleImageError} />
Since I am working on React that's why I used JSX in the id and src attribute. onError attribute is used if the image is broken. It gives me an event, So this is how I access the id attribute:
handleImageError = (e) => { console.log(e.target.id) }
Here is the solution for you,
<img id="logo" src="nsc/logo2.png" alt="logo" onClick="window.open('http://yahoo.com');" />