I have a signature that is used in outlook. The signature has an image at the bottom and a link that encompasses the image. On the computers you are able to click on the image and taken to the link while on the iPhone it asks you to save image, or copy or cancel. On occasion I have noticed it to work but have not been able to determine when it does link and when it asks to copy the image.
The code is the relevant code for the image/link
<table>
<tr>
<td>
<span style="font-size: 10pt; font-family: Calibri">
<br/>
<!-- begin ad tag -->
<a href="LINK" target="_blank">
<img src="IMAGE" border="0" alt="" /></a>
<!-- end ad tag -->
</span>
</td>
</tr>
</table>
Edit 1: Just testing some more, if I go into the web browser on the IPhone and then back into the mail and click the image it goes to the link without prompting to save the image.
Edit 2: Edit 1 works only on the iphone 4 version 5.1 (does not work on 4S have not tested others). Also works on ipad 3 version 5.1
Edit 3: Also does not work on 3g iphone either version 5.1
I am going to mark this up as an iphone issue and say jme1988 is correct unless someone comes up with something else.
Thank you for your help
You have to use the map tags to make it work.
Here's an example using a facebook picture linking to facebook using map:
<img src="http://cdn2.iconfinder.com/data/icons/web2/Icons/FaceBook_128x128.png" alt="Facbook" usemap="#facebook" />
<map name="facebook">
<area shape="rect" coords="0,0,128,128" href="http://www.facebook.com" alt="Facebook" />
</map>
If you aren't familiar with this, try pasting the code in an .html document and check it out (should work). Typically you put the "mappings" just before </body> .
On the coords arguement, you should use x1,y1,x2,y2 plotting. What this means is that you want map a rectangular image from the top-left to the bottom-right of the size of the image. This appears to work on the 3G version.
I actually found a solution that works on iOS 6.1.2 as well as desktop Apple Mail (6.0):
Combine the above approaches:
<a href="http://foo">
<img src="http://bar" usemap="linkmap" alt="Click me" title="Click me"/>
<map name="linkmap">
<area shape="rect" coords="0,0,80,80" href="http://foo" alt="Click me" />
</map>
</a>
Try applying the following css to your image tag and make sure it's added as an inline style.
-webkit-touch-callout: none;
-webkit-user-select: none;
Sounds like an issue with the Iphone to me (wouldn't surprise me). The menu that pops up is likely because the Email client cannot launch the browser window when it has not already been started (hence why it works sometimes and doesn't others).
I'm not sure if my suggestion is the best practice, but the image map solution didn't work for me (iOS 6.1 on iPhone 4s).
Instead, I've just placed a transparent "a href" on top of my desired clickable image:
<a href="http://LINK" id="clickable" style="width:441px; height:244px; position:absolute; top:303px; left:46px; background-color:rgba(0,0,0,0); z-index:99">
Also, I had to leave the original "a href" around the image itself also, because the transparent link did not work on Outlook on PC.
Hope this helps.
Make sure you're linking to the image instead of using an attachment. See Why anchors tag containing an image don't work in Iphone's mail app?.
Related
We upgraded from JSSOR 26.5.2 to 27.5.0, and found that we are no longer able to use "link slides" as described in the JSSOR documentation here:
https://www.jssor.com/development/define-slides-html-code.html
The issue seems to be a DOM change in JSSOR 27. Now there is a new DIV element, the one with data-events=auto and data-display=block, that acts as a kind of "glass" in front of the actual image (the one with u=image). As a result, any ... that surrounds the actual IMG can never be clicked, because the z-index of this "glass" prevents the click on the .
In our case, we've always been using a construct like this:
<a u="image" href="..." style="display: block;">
<img src="..." alt="..."/>
</a>
It's always worked until now. Is this a bug in JSSOR?
Your code is correct.
Anyway, here is an example, hope this helps.
https://www.jssor.com/jssordev/problems/image-slider.slider
https://www.jssor.com/jssordev/problems/image-slider.slider/=edit
The output code is as below,
<a href="#">
<img data-u="image" src="//jssorcdn7.azureedge.net/demos/img/gallery/980x380/004.jpg" />
<div data-t="0" style="position:absolute;top:30px;left:30px;width:500px;height:40px;font-family:Oswald,sans-serif;font-size:32px;font-weight:200;line-height:1.2;text-align:center;background-color:rgba(255,188,5,0.8);">responsive, scale smoothly</div>
</a>
Edit
I got the problem, the new version improved to use <a> element as whole slide.In this manner, you can add anything inside without hiding the link area.
That's to say, as <a> is a slide, you can remove the parent <div> element.
I am using the following code to insert an image in Jupyter notebook which is compatible with html conversion:
from IPython.display import Image
Image(filename="picture.jpg")
This works nicely except the fact that it is left aligned and I need it centre/middle aligned.
Is there any method that I can set it to be aligned correctly?
This works for me:
<center><img src="picture.jpg"/></center>
You can set the cell as markdown and use this content:
<img src="picture.jpg" width="240" height="240" align="center"/>
Then run it.
Edit1
Alternatively, you can use a code cell with this code:
from IPython.display import HTML
html1 = '<img src="picture.jpg" width="240" height="240" align="center"/>'
HTML(html1)
Many browsers (Chrome, Firefox) are only supporting HTML 5, so this syntax no longer works, even within the notebook itself.
<img src="picture.jpg" align="center"/>
because align="center" has been deprecated. Now you should use CSS style properties and the various margin definitions.
<img src="picture.jpg" style="margin-left:auto; margin-right:auto"/>
or
<img src="picture.jpg" style="margin:auto"/>
See here for more discussion around this. This makes it look properly centered while being displayed in your Notebook. But frustratingly doesn't work (still left justified) when you export your notebook to HTML. Inspecting the HTML that is generated you find that the <img> is embedded in a <p> element and this throws the whole thing off. So you have to add an additional display=block property, making the whole thing
<img src="picture.jpg" style="display=block; margin:auto"/>
This will center the image in your notebook, exported HTML, and exported Markdown files. Thanks to these guys for the tip on the display=block bit.
To get a centered bit of text underneath the image (like a figure title) I throw in a
<p style="text-align: center">
<b>Figure N. My Cool Figure</b>
</p>
afterwards. The whole setup is then
<img src="picture.jpg" style="display=block; margin:auto"/>
<p style="text-align: center">
<b>Figure N. My Cool Figure</b>
</p>
We have a sharing toolbox that defaults to 32x32 px but we also use the same toolbox code to display at 20x20 px in other parts of our site. The code below (including Drupal tokens) worked fine for a few months but last month it started showing the icons at 32x32 even though it has the class addthis_20x20_style. It also changed the behavior on another system outside Drupal that uses the same toolbox code.
<div addthis:title="[node:title]" addthis:url="[node:url]"
class="addthis_sharing_toolbox addthis_default_style addthis_20x20_style">
</div>
I tried changing addthis_sharing_toolbox to addthis_toolbox per the support page at http://www.addthis.com/academy/customizing-the-addthis-toolbox/, but then the buttons do not display at all. The AddThis support pages are incredibly disorganized and outdated and they seem to have abandoned their user forum. I don't even know where else to ask.
Here's a reply I received from AddThis support. Hopefully this will be of use to others:
JAN 07, 2016 | 03:26PM EST
Hi,
We recently made a change to our code that affected some of our older
buttons.
You will need to use our advanced configuration code in the locations
that you would like our buttons to appear in 20x20.
Replace the current code in these locations with the following:
<div class="addthis_toolbox addthis_default_style addthis_20x20_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
Additional advanced configuration code information can be found here:
http://www.addthis.com/academy/customizing-the-addthis-toolbox/
Please let me know if you need any additional help
Thanks,
Mike
I am having the same problem. It looks like they have removed support for 20x20 sized buttons, as it is no longer listed on the academy support page you provided. It is a shame because it is the only size that has a constant height for facebook, facebook_like, tweet, etc buttons.
The below css styles, while feeling a little hacky, go some distance in repairing the broken functionality:
.addthis_20x20_style .at-icon-wrapper,
.addthis_20x20_style .at-icon {
height:20px !important;
width:20px !important;
}
That didn't fix the size of the google_plusone button. I happen to be using drupal as well - the addthis module - and the below 'customize services' settings worked pretty well.
That's:
Service code: google_plusone
HTML classes: addthis_button_google_plusone
HTML attributes: g:plusone:size="medium"
(Re the addthis service, the phrase "you had one job!" comes to mind...)
I have an appgyver app that I've tried to display images via
<img src="app/common/assets/pic.jpg"/>
<img src="common/assets/pic.jpg"/>
<img src="assets/pic.jpg"/>
<img src="pic.jpg"/>
<img src="http://www.somegoogleimage.com/pic.jpg"/>
Nothing shows. I'm confused out of my wits! I've also tried ng-src directive as source. Help !
create a folder in your supersonic project
app/common/assets/images
Put your images in app/common/assets/images
src =/images/yourimage.jpg
i have gwt app, and one of the 'page'(or display) has a iframe whose url point to google web page, however when deploy the app, google page doesn't show up. here is the code
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/"></g:Frame>
</div></g:HTMLPanel>
if i replace the google webpage with a static image stored locally, it show up fine:
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Image url="img/myImg.jpg"></g:Image>
</div>
</g:HTMLPanel>
can anyone tell me why it won't work with external link? Thanks
Answered on the GWT group: https://groups.google.com/d/msg/google-web-toolkit/nwlTBBVGJSA/pho1SVeviQEJ
Copied here for convenience:
Google refuses to be displayed in a frame using the X-Frame-Options HTTP header.
See http://code.google.com/p/google-web-toolkit/issues/detail?id=7055
The code you provided creates the UI, including the frame, just fine. The thing you're not doing is setting a height and width for your frame, so it's effectively invisible. Change your code to the following and you'll see your frame.
<g:HTMLPanel styleName="{style.ctntBox}">
<div id="contactForm">
<g:Frame url="http://www.google.com/" height="150px" width="150px" />
</div></g:HTMLPanel>
The reason you didn't have to specify the height and width for an image is because they are implicitly defined by the image itself. There's no way for GWT to know how big you want an iframe to render on your page, so you have to explicitly set the size.