I have the following HTML template :
<div class='item'>
<img href='...' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
I use Jquery to on mouse over of the div (and thus the image), and show the popup. The problem is, I can't seem to control+click to open in a new tab in chrome nor firefox; neither can I right click the image and open the link in a new tab. How can I do this?
Add target="_blank" to the link. It should look something like this:
<div class='item'>
<img src='....' attributes='...' \>
<div class='popup' attributes='...'>
</div>
</div>
The link that you want the image to open goes in a href='LINK' and the file path to the image goes in img src='PATH'
Check this example
Here's the code markup with an example of an image (ctrl+click on it and it will take you to google.com):
<div class="item">
<a href="http://www.google.com">
<img src="https://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" attributes="#"\>
</a>
<div class="popup" attributes="#">
</div>
</div>
You just needed to wrap your <img> tag with an <a> tag.
Hope it helps!
Surround your image with <a> tags and link to a new page which has the image on it.
All you need is
<div class='item' >
<a href='...' attributes='...' target="_parent">
<img src="yoursource.jpg"/></a>
<div class='popup' attributes='...'>
</div>
</div>
Add target="_parent" or you could use _blank to your href (and remove the img for now), then close the href with > and make and new img field. wrap your href and img with Should work now
Related
I need to put a link href="/favourites_new/" in the text so that when I click on the card (not on the text itself) I could go to another page. There is my simple code
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
How should I solve my problem?
Add all you code inside an tag
for example
<a href=your link here>
<div class="left-card-parent">
<div class="left-card">
<h1 class="left-card-h2"> ⬅</h1>
<p>selected</p>
</div>
</div>
</a>
I have a simple HTML code with an HTML a element and some text and an icon inside the tag. The hover function works well since the cursor changes form, but when I click on it nothing happens.
<div id="cart-block">
<div class="blockcart cart-preview active leo-blockcart show-leo-loading" data-refresh-url="//novaled.cl/module/ps_shoppingcart/ajax">
<div class="header popup-title">
<a rel="nofollow " href="//novaled.cl/carrito?action=show">
<i class="material-icons shopping-cart"></i>
<span class="hidden-md-down cart">Carrito</span>
<span class="cart-products-count">(1)</span>
</a>
</div>
<div class="cssload-piano" style="display: block;">
<div class="cssload-rect1"></div>
<div class="cssload-rect2"></div>
<div class="cssload-rect3"></div>
</div>
</div>
</div>
It works well and redirects to the page when I right click on it and choose "Open in a new tab".
I also tried inspecting the element and clicking the link directly from the href attribute, and it does work that way too.
This is the website https://novaled.cl, and the link is on the top right corner. It is the link that shows the shopping cart when there are articles in it.
I am trying to setup this html code so that when someone clicks on this image they will be redirected to a new url. For some reason when I click the image it redirects the image to google.com and not the page.
https://jsfiddle.net/ssLtf588/
I have the src set to the image which i assume is the error. How should i go about changing this?
<div class="container">
<a href="http://google.com">
<img src="http://i.imgur.com/SSPyEQ3.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World Whats up!</div>
</a>
</div>
Just add target="_blank" if you want it to open in a new window..
Here you go:
<a target="_blank" href="http://google.com">
This will work:
https://jsfiddle.net/ssLtf588/2/
On your fiddle, the a tag is behind the overlay, so when you click, it's a click on the overlay and not on the link.
In the following code snippet:
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>
the named anchor (<a name="top"></a>) introduces a line break before the topbar div. Is there a way to prevent this? For a variety of reasons it is essential that the named anchor be located above the div containing the banner image.
I have tried using CSS to set the height of the anchor to 0px and display to none, but this renders he anchor non-functional (i.e. linking to #top from elsewhere in the page no longer works).
Is there a workaround for this?
Actually, using an anchor to link to a certain part on the page is obsolete. You can use the global id attribute instead. That also fixes your problem as you don't have to add extra dom elements:
<div class="topbar" id="top">...</div>
Somewhere else:
Go to top
Easy does it!
Make the div <div class="topbar"> inline,
.topbar{
display:inline-block;
}
<a name="top"></a>
<div class="topbar">
<img src="banner.jpg" alt="The Group Company" width="100%" />
<div class="printOnly">
<center><b>Printed from www.company.com</b></center>
</div>
</div>
I have a logo in the header of my website and I want the logo to direct you to the home page when it is clicked. In the code, the anchor is just surrounding the <img> tag, but on the website the entire div is clickable. How can I make it so that just when I hover on the image it is clickable, not the entire div.
<div class="row">
<div class="col-sm-12">
<a href="#Url.Action("index", "home")">
<img class="img-responsive" src="~/Content/img/stars.jpg" alt="Stars" />
</a>
</div>
</div>
I just found the answer. I needed to add the style display: inline-block to the <img> tag.