This is my simple code in html..
<p class="backto">
<a href="http://saisukamal.com">
<img src=<?php echo base_url()."images/img_top1.gif";?>><br/>
<span style="margin-right: -5px;">Home</span></a>
</p>
<p class="backto1">
<a href="http://saisukamal.com/contactus.html">
<img src=<?php echo base_url()."images/img_top3.gif";?>><br/>
<span style="margin-right: -5px;">Contact</span></a>
</p>
First link is working but second is not. When I remove p class, then it works. It may be overriding. So what will be the solution for that??
I believe it's the way you've built your image tags. The quotes are not created properly because the existing quotes are for the string in your echo which could throw off your HTML.
<p class="backto">
<a href="http://saisukamal.com">
<img src="<?php echo base_url()."images/img_top1.gif";?>"><br/>
<span style="margin-right: -5px;">Home</span></a>
</p>
<p class="backto1">
<a href="http://saisukamal.com/contactus.html">
<img src="<?php echo base_url()."images/img_top3.gif";?>"><br/>
<span style="margin-right: -5px;">Contact</span></a>
</p>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hover demo</title>
<script>
</script>
<style type="text/css">
a{
cursor: pointer;
}
</style>
</head>
<body>
<p class="backto">
<a href="http://saisukamal.com">
<img src="<?php echo base_url()?>images/img_top1.gif"><br/>
<span style="margin-right: -5px;">Home</span></a>
</p>
<p class="backto1">
<a href="http://saisukamal.com/contactus.html">
<img src="<?php echo base_url()?>images/img_top1.gif"><br/>
<span style="margin-right: -5px;">Contact</span></a>
</p>
</body>
</html>
Related
I'm using Figma to design my web page but when I try to convert it into HTML and CSS the text appears without style, although I tried to embed the CSS with HTML or link it with the external file it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>Desktop - 21</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Almarai%3A300%2C400%2C700"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A300%2C400%2C700"/>
<link rel="stylesheet" href="./styles/desktop-21.css"/>
</head>
<body>
<div class="desktop-21-Su8">
<div class="auto-group-ntce-Q5G">
<div class="auto-group-4ge6-XQn">
<div class="auto-group-bez8-T3Y">
<img class="image-11-NgJ" src="./assets/image-11-4SW.png"/>
<div class="auto-group-jkh4-gwt">
<div class="image-2-pHQ">
</div>
<p class="item--kRx">الدخول</p>
<img class="lock-02-SZg" src="./assets/lock-02-zCr.png"/>
</div>
<p class="item--n7k">المساعدة والدعم</p>
<p class="item--Fn2">الاسئلة المتكررة</p>
<p class="item--YFL">
<span class="item--YFL-sub-0">
تعرف على
<br/>
</span>
<span class="item--YFL-sub-1">حصيف</span>
</p>
<img class="image-10-o4n" src="./assets/image-10-hop.png"/>
</div>
<div class="line-6-7rA">
</div>
<p class="item--rYr">حصيف</p>
</div>
<p class="item--N1Q">الخدمات العدلية الالكترونية</p>
<div class="auto-group-u3mu-E3c">
<img class="chevron-left-vx2" src="./assets/chevron-left-wR4.png"/>
<p class="item--rqg">الدخول</p>
</div>
</div>
<div class="auto-group-nyy8-jea">
<div class="frame-2-fHL">
<p class="item--C2N">حصيف</p>
<p class="item-920072390-79L">920072390</p>
</div>
<p class="item-1444-2020--cbt">جميع الحقوق محفوظة لحصيف ,المملكة العربية السعودية 1444 ه -2020 م</p>
<div class="auto-group-vefu-2fc">
<p class="item--xZG">مواقع التواصل الاجتماعي</p>
<div class="auto-group-wyye-EWn">
<div class="auto-group-m8ae-xhg">
<img class="image-16-usp" src="./assets/image-16-HBY.png"/>
<img class="image-15-3z2" src="./assets/image-15-8pS.png"/>
</div>
<img class="image-14-PY6" src="./assets/image-14-Mjp.png"/>
</div>
</div>
<p class="item--dSS">
<span class="item--dSS-sub-0">
المساعدة والدعم
<br/>
<br/>
</span>
<span class="item--dSS-sub-1">
الاسئلة الشائعة
<br/>
<br/>
دليل المسخدم
<br/>
</span>
</p>
</div>
</div>
</body>
I tried using anima and other plugins in Figma but didn't work for me, function12.io helped me with extracting the code but it appears as a text without style
Try
Builder.io - Figma to HTML, React, and more
TeleportHQ - Figma to Code - Export HTML, CSS, React & Vue
In the Function12, once you export the code, you can check the styles over here.
why when I try to embed a tiktok on my page, does the height of the iframe keep growing indefinitely? It only happens on Iphone. The div below as a result continues scrolling down indefinitely
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/#lemiericette1/video/6892399695595965697" data-video-id="6892399695595965697" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="#lemiericette1" href="https://www.tiktok.com/#lemiericette1">#lemiericette1</a> <p><a title="banana" target="_blank" href="https://www.tiktok.com/tag/banana">#banana</a> <a title="chocolate" target="_blank" href="https://www.tiktok.com/tag/chocolate">#chocolate</a> <a title="dessert" target="_blank" href="https://www.tiktok.com/tag/dessert">#dessert</a> <a title="new" target="_blank" href="https://www.tiktok.com/tag/new">#new</a> <a title="idea" target="_blank" href="https://www.tiktok.com/tag/idea">#idea</a></p> <a target="_blank" title="♬ sonido original - s.o.n.i.d.o" href="https://www.tiktok.com/music/sonido-original-6871655704382556930">♬ sonido original - s.o.n.i.d.o</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>
<div>
hello
</div>
</body>
</html>
you can do this by limit it's parent element with a maximum height value, like this:
blockquote {
max-height:500px;
}
or in html
<blockquote style="max:height:500px"...
I am setting up a web app with flask. I try to show remote pictures
Flask replaces {{article["image"]}} with https://gitlab.com/MindReadH/Articles/raw/master/spain.png in the following code:
<html>
<head>
<title>{{article.title}}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='vendor/bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='fonts/font-awesome-4.7.0/css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename ='css/articleDetail.css')}}"/>
</head>
<body>
<div class="container">
<center><i class="fa fa-arrow-left fa-3x"></i> <i class="fa fa-home fa-3x"></i></center>
<div class="card mb-4">
<div class="card-body">
<h2 class="card-title" align="center">{{ article['title'] }}</h2>
<p align="center" class="card-text">{{ article['abstract']}}</p>
<p align="center" class="card-text">Category : {{ article['category']}}</p>
<p align="center" class="card-text">Article Tags : {{ article['articleTags']}}</p>
<p align="center" class="card-text">Authors : {{ article['authors']}}</p>
<p align="center" class="card-text">Language : {{ article['language']}}</p>
<p align="center" class="card-text">Text : {{ article['text']}}</p>
<img src={{article['text']}} class="inline"/>
<p align="center" class="inline-text">Image : {{ article['image']}}</p>
<img src={{article['image']}} class="inline"/>
<p align="center" class="card-text">Video : {{ article['video']}}</p>
<video controls><source src={{article['video']}}class="inline"/></video>
</div>
<!--<img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">-->
</div>
</div>
</body>
</html>
As expected, the first line
<p align="center" class="inline-text">Image : {{ article['image']}}</p
returns
Image : https://gitlab.com/MindReadH/Articles/raw/master/spain.png which is the address of the image
But the image is not loaded with the second line. Firefox log says:
"loading of all possible resources failed"
Edit
as Luis Melo pointed out, i just missed the quotation marks on the src file:
<img src="{{article['image']}}" class="inline"/>
The problem is that you are not using quotation in your html.
Try replacing every src and href like these:
<img src={{article['image']}} class="inline"/>
With parameters with quotation:
<img src="{{article['image']}}" class="inline"/>
You can visualize the solution working here along with the same issue you are facing.
I'm changing a site template into the drupal theme.
I put the header in html.tpl.php and body in page.tpl.php and also set .info file but the page doesn't load properly and image of the site don't show in browser.
it seems to me with these settings and Since I still haven't changed the static content. it should work same as static version if so what would be the problem?
HTML code:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/modernizr.js"></script>
</head>
<body>
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.info file:
package, core and ..
stylesheets[all][] = css/style.css
scripts[] = js/modernizr.js
and region
html.tpl.php file:
?><!DOCTYPE html>
<html class="no-js" lang="en">
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
page.tpl.php file:
<div id="wrapper">
<div class="header-wrapper header-alt2">
<div class="works-thumb">
<img src="../img/works/works-8.jpg" alt="Project Name">
<div class="works-title">
<h4>
Project Name
</h4>
</div>
<i class="icon-play"></i>
<div class="overlay">
<h4></h4>
<p>Project Name Description</p>
<div class="overlay-icons">
<i class="icon-eye"></i>
<i class="icon-link"></i>
<i class="icon-play"></i>
</div>
</div>
</div>
</div>
</div>
Copy your all images in to
/sites/all/themes/yourthemename/images
folder.
Then change the image path in page.tpl.php like this:
/sites/all/themes/yourthemename/works-8.jpg
instead of using:
../img/works/works-8.jpg
How can I change this exact code to do the hovering effect on mouseover?
I tried following some of the other questions and answers, but I could not really follow them.
So the HTML is:
<img src="R3.jpg" width=700 height=300 />
<div>
<img src="SSX.jpg" height=100 width=120 />
<img src="MaxPayne3Cover.jpg" height=100 width=120 />
<img src="NC.jpg" height=100 width=120 />
</br>
</div>
Now what I want to do is change the big size image when the mouse hovers over the small images.
Try this it`s so easy and the shortest one, just change the Image's URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
Try the following code. It's working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
Or do like this:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.
No JavaScript needed if you are using this technique
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)
The easiest way for Roll Over image or Mouse Over image for web pages menus
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>
<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
src="R3.jpg"
width=700
height=300/></a>
<div>
<a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
<img src="MaxPayne3Cover.jpg" height=100 width=120/>
<a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
</br>
</div>
If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
Here's how:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
Just Use this:
Example:
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
Copy This
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
Here is a simplified code sample:
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}