Hi I have a website that has a banner that i want to link to another website of mine, but I want it to open in a new window. I also want the cursor to be a hand in all browsers as well. I tried the target = "_blank" method but I don't believe that is right. How can I do this in PHP?
here is the code
I know there are some answers similar to this question but none have solved my problem
<div class="banner-part" onclick="location.href='www.blabla.org/' target="_blank";" style="cursor: pointer;" style="cursor: hand;"><img src="<?php bloginfo('url') ?>/images/banner.png" alt="" /></div>
You're making a bit of a mess there. You're forcing a <div> to act like an <a>, when you could achieve the same thing with a sprinkle of CSS:
<a href="http://www.blabla.org" target="_blank" class="banner-part">
<img src="<?php bloginfo('url') ?>/images/banner.png" alt="" />
</a>
And make the <a> a block element through CSS, without needing to put a block element (<div>) inside an inline element (<a>), which is invalid html in doctypes apart from HTML5 (though the browsers won't complain much)
a.banner-part {
display:block;
}
<div class="banner-part"><img src="<?php bloginfo('url') ?>/images/banner.png" alt="" /></div>
Use the div inside the a tag
target is not a valid property for div element. Try this:
<a href="YOUR_PATH_HERE" target="_blank">
<div class="banner-part">
<img src="<?php bloginfo('url') ?>/images/banner.png" alt="" />
</div>
</a>
Your HTML is broken:
<div [...snip...] /></a>
^^^------------------^
You open a div tag, then close an a
Related
so this is my current script but i cant seem to get it right with the link please help me and add a link (to a sub-page) when i click the image that is active when i hover over it. Do I need to insert the new line before the last </a>?
<a href="URL ADDRESS">
<img
src="test.com/test1.png";
onmouseover="this.src='test.com/test2.png'";
onmouseout="this.src='test.com/test1'"; />
</a>
I have tried several ways but I am really new at this and I cant figure it out.
Please try this, the semicolons are unnecessary and misplaced !
<a href="URL ADDRESS">
<img src="test.com/test1.png"
onmouseover="this.src='test.com/test2.png'"
onmouseout="this.src='test.com/test1'"/>
</a>
Use this instead. Your semi-colons are only relevant in the script handlers. You had them outside the attributes which would be invalid HTML. And the one after src was incorrect.
<a href="URL ADDRESS">
<img
src="test.com/test1.png"
onmouseover="this.src='test.com/test2.png';"
onmouseout="this.src='test.com/test1';" />
</a>
Try with this.
Ps.
I used JQuery
$(document).ready(function(){
$('img').hover(function(){
$(this).attr('src','test.com/test2.png');
$(this).parent('a').attr('href','link when mouse enter the img');
},function(){
$(this).attr('src','test.com/test1');
$(this).parent('a').attr('href','link when mouse leave the img');
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="URL ADDRESS">
<img
src="test.com/test1.png";
onmouseover="this.src='test.com/test2.png'";
onmouseout="this.src='test.com/test1'"; />
</a>
I just want my page to contain one image then once you click it.. you can move across and view more images.. is this possible?
Atm my fancy box is just one image showing one image..
Any help would be great, thanks
I use to work with Fancybox since earlier versions. What I do in that case is:
HTML:
<!-- this is the regular image -->
<a class="fancybox" href="leIMG-bigger-0.jpg" rel="leGallery"><img src="leIMG-0.jpg" alt=""></a>
<!-- this is the rest of the gallery... hidden -->
<div class="fancyboxHidden">
<a class="fancybox" href="otherIMG-bigger-1.jpg" rel="leGallery">
<img src="otherIMG-1.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-2.jpg" rel="leGallery">
<img src="otherIMG-2.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-3.jpg" rel="leGallery">
<img src="otherIMG-3.jpg" alt="">
</a>
<div>
CSS:
.fancyboxHidden {display:none;}
This way you are:
1) Using your full gallery (try the thumbs helper and will look great)
2) Indexing all the images for search engines
Hope this will help you, for a good example of this check out this site in source view.
PS: There is many ways to achieve what you want, you can create the gallery directly from JS or combine both ways. This is the way I choose for image indexing ;)
Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.
I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.
heres the code:
The raw HTML comes from CMS looking like:
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
I then run some stuff in backbone view render, the important bit is this:
var imgs = this.$el.find("img"); //:a jquery group of the img elements above
this.content = this.$el.find("span.postcontent");
//empty current
this.content.empty();
//make replacement
for(i= 0;i<imgs.length;i++)
{
var curImg = $(imgs[i]);
var curLink = $("<a/>");
curLink.attr("href",curImg.attr('data-orig'))
curLink.append(curImg);
curLink.on("click",function(e){
e.preventDefault();
$.fancybox.open(imgs)
});
this.content.append(curLink)
}
I now have rendered html like this:
<a href="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:
<a href="http://blah..blah..flickr..big..001_b.jpg">
///THIS IS MISSING COMPLETELY..... ggggggrrrrr
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
I've never seen Fancybox used like that. Normally, you don't need to trigger $.fancybox.open like that. You can just bind fancybox() to the <a> tags.
HTML:
<a href="big-image.jpg" class="fancybox">
<img src="thumbnail.jpg">
</a>
JavaScript:
$('.fancybox').fancybox();
Try just using that function after you've got the DOM to look like that.
[edit]
I couldn't get your DOM manipulation to quite work, but I tested with this fiddle, and it seems to be working: http://jsfiddle.net/haRnQ/4/
NOTE: I didn't import the styles or images for the demo, so it will be unstyled, but it still works.
I'm answering and voting up the previous two because they both helped but were not the definitive answer. The documentation was not clear that if you use only the "group" as a jquery array you must also specify options therefore the correnct answer is to do this (passing two arguments):
$.fancybox.open(imgs,
{
href:this.href,
title:curImg.attr("title")
}
);
Try changing this
$.fancybox.open(imgs)
by this
$.fancybox({
href: this.href
});
because imgs is the collection of your thumbnails (all <img> elements), which are moved to fancybox on click but not moved back after close.
In any case I would recommend you to add a class to <a> otherwise any other anchor you may have in your page would try to open fancybox.
I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.
Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.
This is my typical FB setup (not a thumb gallery):
<img src="image1.jpg" alt="" />
<div style="display: none">
...
</div>
So I have a button with code like this:
<div style="text-indent: 0pt; visibility: inherit;" id="button5061">
<a title="Continue" href="javascript:if(%20button5061.hasOnUp%20)%20button5061.onUp()" name="button5061anc">
<img width="82" height="25" border="0" style="cursor: pointer;" alt="Continue" src="images/continueoff.gif" name="button5061Img">
</a>
</div>
And I need to click it with javascript. Right now I am using the firefox extension Chickenfoot which allows me to script the site with a javascript interpreter with some custom commands.
http://groups.csail.mit.edu/uid/chickenfoot/api.html
I have tried selecting it with xPath (//div/a[#title='Continue']/..) which finds it, but when I click() it nothing happens.
Here are some of the things I have tried:
click(find(new XPath("//img[#alt='Continue']/..")))
click(find(new XPath("//img[#alt='Continue']/../..")))
click("continue")
click("Continue")
click("images/continueoff.gif")
click("continueoff.gif")
click(find("Continue"))
click(find("Continue").element)
click(find("images/continueoff.gif"))
I know this is a rather specific quesiton but any ideas on what to try would be much appreciated.
html:
<div>
<a href="#" onclick="alert('ok')">
<img src="">
</a>
</div>
javascript:
var xPathRes = document.evaluate ('//div[1]/a[1]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
xPathRes.singleNodeValue.click();
jsfiddle:
https://jsfiddle.net/7fm89aqd/
If you're trying to simulate a user clicking on it:
You can simulate a click like this: document.getElementById('theSubmitButton').click();
Here's an example for ya: http://jsfiddle.net/gasWZ/1/
If that's not what you're trying to do, could you explain a bit more?
Wouldn't it be effective to pass the anchor object to your function and evaluate the name attribute?
set the href attribute to #
call the function and pass the obj
<div style="text-indent: 0pt; visibility: inherit;" id="button____"> <a title="Continue" href="#" name="button____anc"> <img width="82" height="25" border="0" style="cursor: pointer;" alt="Continue" src="images/continueoff.gif" name="button____Img"> </a> </div>
<a href="#anchor1">
<img src="http://www.test.com/images/test/test.png" width="80" height="150" />
</a>
<div id="anchor1">...</div>
When I mouse over test.png I need it to scroll the page to #anchor1 ..help_me
Use Javascript inside the onmouseover event:
<img onmouseover="window.location.hash = 'anchor1'" />
Note that you don't use the '#' character.
Also, you are not naming the anchor correctly. It should be:
<a name="anchor1" .... instead of href.
I'm not sure you're using "anchor" in the generally accepted sense.
the tag is a "anchor" tag that is used to wrap around an image or text link, or now virtually any DOM object it consists of either a href tag, which is it's target, or a name tag in which case it IS a target. so a page with
<a id="part1"/><h3>part 1</h3></a>
and
<img src="..." onMouseover="$.scrollTo('#part1');">
clicking on the image would make the page scroll so that the h3 containing "part1" would be at the top of the page.
to do it with jQuery and mouseOver you'll need to use jQuery scrollTo() then you can define your speed and easing.