<ion-side-menu side="left">
<ion-content>
<div class="list card">
<a menu-close href="#/app/account" class="item item-avatar">
<img src="{{user.detail.avatarUrl}}" on-error-src="img/avatar.jpg">
<h2>{{user.detail.nickname}}</h2>
<p>{{user.attributes.username}}</p>
</a>
</div>
<ion-list>
<ion-item menu-close href="#/login">
登陆
</ion-item>
</ion-list>
<div class="card">
<div class="item item-image">
<img alt="个人信息" src="img/wudics.jpg">
</div>
<div class="item item-image">
<p>扫描二维码下载APP版</p>
</div>
</div>
</ion-content>
I have set the alt tag inside img tag, but this is not working. I want to implement that it can show a tip when my mouse hover on the image.
how to do that? please help.
From what I know alt tag was not intended to be used in this way being alternative text if the image can not be displayed or if read using text to speech software for blind people.
Try the title attribute for additional information about the image.
example title="your text"
Not sure why it's not displaying though.
Related
can anyone help me, why my image won't load ?
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="'../src/assets/image/kimi-no-na-wa-poster.jpg'+movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
This is my dir
<div class="card" v-for="movie in movies_trend" v-bind:key="movie.id" >
<div :class="['card-movie', movie.page]" :movie="movie.name">
<img :src="movie.poster" class="card-img-top" :alt="movie.name">
</div>
</div>
your path of an image can be added to movie.poster
so your movie.poster will contain value '../src/assets/image/kimi-no-na-wa-poster.jpg'
you can add image tag in the following way also
<img :src="'../src/assets/image/'+ ${movie.poster}" class="card-img-top" :alt="movie.name"/>
In this case, your variable movie.poster will container only the name of image kimi-no-na-wa-poster.jpg
So, I am building a web crawler for one site's comment section, and I have came with a problem, it seems I can't find a text node for the comments content. This is how the web pages element looks:
<div class="comments"> // this is the whole comments section
<div class="comment"> // this is where the p is located
<div class="comment-top">
<div class="comment-nr">208. PROTAS</div>
<div class="comment-info">
<div class="comment-time">2015-06-30 13:00</div>
<div class="comment-ip">IP: 178.250.32.165</div>
<div class="comment-vert1">
<a href="javascript:comr(24470645,'p')">
<img src="http://img.lrytas.lt/css2/img/com-good.jpg" alt="">
</a> <span id="cy_24470645"> </span>
</div>
<div class="comment-vert2">
<a href="javascript:comr(24470645,'m')">
<img src="http://img.lrytas.lt/css2/img/com-bad.jpg" alt="">
</a> <span id="cn_24470645"> </span>
</div>
</div>
</div>
<p class="text-13 no-intend">Test text</p> // I need to get this comments content
</div>
I tried a lot of xpath's like:
*/div[contains(#class, "comment")]/p/text()
/p[contains(#class, "text-13 no-intend")]/text()
etc.
But can't seem able to locate it.
Would appreciate any help.
How about this:
//div[#class = 'comments']/div[#class = 'comment'][1]/p/text()
I am trying to add an image and text as a Bootstrap menu item.
I would like to be able to see the hover effect on this custom menu item in the same way as other items.
Also, my CSS code is pretty dirty; it uses width:300px, div inside links, etc. Can someone please suggest me how to do this better?
My code can be seen here.
<li>
<div class="clearfix">
<a href="/" style="display:block; width:300px; padding-left:20px; color: black;" >
<div class="pull-left">
<img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />
</div>
<div class="pull-left" style="margin-left:10px;">
<span><strong>iPhone 6</strong></span>
<br />
<span>Bigger than bigger</span>
</div>
</a>
</div>
</li>
You need to move the <a> tag above the clearfix and then just remove the inline color:black; on the a so that the hover color change works.
<li>
<a href="/" style="display:block; width:300px; padding-left:20px;" >
<div class="clearfix">
<div class="pull-left">
<img src="http://images.apple.com/iphone/home/images/productbrowser/icon_iphone_6.png" />
</div>
<div class="pull-left" style="margin-left:10px;">
<span><strong>iPhone 6</strong></span>
<br />
<span>Bigger than bigger</span>
</div>
</div>
</a>
</li>
JSFiddle here
In regards to css, firstly, I would not use inline styles - put the styles on the style sheet. You should preferably use width: auto; and use floats and padding to position the elements inside the menu item.
I am using bootstrap framework.
<div class="container">
<h1>Menu</h1>
<div class="row">
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
</div>
</div> <!-- /container -->
Whitespace on the left and right sides of the images are also clickable - looks like .center-block is the culprit. How to solve?
A block spans the entire div, and centers by using margin. As a link, I would suggest instead removing the center-block from the images themselves, creating a class:
.center {
text-align: center;
}
and setting that class on the containing div, in your case:
<div class="col-md-4 center">
Or something similiar.
Also I would suggest placing your text description for each image into a div, since without the image being a block, the text would flow next to it. Simply placing the text in a paragraph tag would suffice.
Here is a jsbin to demonstrate:
http://jsbin.com/zamavoha/1/edit
I have images placed in my website using the < img> tag. When the website is scaled to a smaller screen the images hang over the container. Why are they not scaling with the the rest of the site? Any fixes?
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="img/WDadd.png" alt="" />
</div>
</div>
</div>
I dont know if this is the right way to do it, but it seems to be working for me you could try to add, give it the class thumbnail on the image, and if you dont like the look of thumbnail you can always edit it in your css file
example: http://jsfiddle.net/abnH6/6/
<div class="container">
<div class="col-md-12">
<div class="col-md-4 padtop">
<img src="http://lorempixel.com/500/500/" alt="" class="thumbnail"/>
</div>
</div>
</div>