I have to admit I'm very new to this, but I'm building a website based on a template am just about done except for one thing! I'm trying to get the background to change to a different image when a user clicks on a nav bar item and a different part of the site pops up.
If it's helpful, this is the website: www.pitchadvisor.com
Currently, my nav bar links are set up as follows:
<span></span>What</li>
I tried the following change but it didn't work:
<a href="#!/page_about" onclick="document.getElementById('test').style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)'; return false;" >
Any help would be greatly appreciated!!
Thanks!
Its not working because, your background is set in html not css, heres what i came up with to possibly fix it:
Change line 78 of the html from
<div id="bgStretch"><img src="http://pitchadvisor.com/images/bg.jpg" alt=""></div>
to
<div id="bgStretch"><img id='bgimage' src="http://pitchadvisor.com/images/bg.jpg" alt=""></div>
and change your javascript from
<a href="#!/page_about" onclick="document.getElementById('test').style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)'; return false;" >
to
<a href="#!/page_about" onclick="document.getElementById('bgimage').setAttribute('src', 'http://www.pitchadvisor.com/images/bg2.jpg');" >
Let me know if this works for you, or anything else i can do.
Will this help?
<a href="#" onclick="javascript:document.getElementById('asd')
.style.backgroundImage='url(http://www.pitchadvisor.com/images/bg2.jpg)';">
Click Me </a>
<div id="asd" style="margin-top:50px; width: 100px; height: 100px; border: 1px dashed green;"></div>
Try it here: http://jsfiddle.net/dTAW3/
Related
And by not working, I don't mean that they don't load the page they're connected to. I mean the browser apparently doesn't even see them. Clicking does nothing, no change to the cursor on hover, right-clicking gives no options for "Open link" or "Open link in new tab". It's like they're not even there.
I've tried this in multiple browsers and on multiple devices. Same problem.
The links are written like so:
<div className={`${styles.listItem} ${styles.spotify}`}>
<a
className={styles.link}
href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
target="_blank"
/>
</div>
The only thing I could think to do was wrap the in the tags instead of the reverse. That only breaks it further. The icon won't even show up that way. I've tried inspecting the icons with dev tools, and the tags with the correct hrefs are there.
Here is the most recent version of the site. The problem is with the social media icons in the Contact section at the bottom of the page.
https://kmac-website-g8cm3chxl-a-shotwell.vercel.app/
And here is the code for the entire component:
import React from "react";
import styles from './Social.module.css'
const Social = () => {
return (
<div className={styles.main}>
<h1 className={styles.banner}>REACH OUT.</h1>
<div className={styles.socialContainer}>
<div className={styles.listContainer}>
<div className={`${styles.listItem} ${styles.spotify}`}>
<a
className={styles.link}
href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.facebook}`}>
<a
className={styles.link}
href="https://www.facebook.com/MixITMac"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.instagram}`}>
<a
className={styles.link}
href="https://www.instagram.com/kmacxkmc/"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.twitter}`}>
<a
className={styles.link}
href="https://twitter.com/KTHAMC1"
target="_blank"
/>
</div>
</div>
</div>
</div>
);
};
export default Social
Any help would be appreciated. Thanks.
I figured it out. The problem was that the links had no text, and the CSS was not set to take up 100% of the space of the containing div. So there was nothing to click on.
.link {
display: block;
height: 100%;
width: 100%;
}
This fixed the problem. I must have deleted the relevant CSS in a past version and wasn't aware of the problem until now. Thanks anyway, guys. Hope someone learns from my mistake.
sorry if my title is a bit misleading but didn't know how to word/phrase it.
Currently, I have href'd images that go to various social networks. For example, by clicking on the facebook icon, it goes to my facebook. It is layed out like this:
<div class="row">
<center>
<div class="span2">
<img src="assets/img/icons/fbwhitebig.png" width="64" height="64"></img>
</div>
Is there a way to make this a "class" if that makes sense? So I can get the same effect by doing something like
<div class="span2">
</div>
and then in the CSS have this:
.facebookbutton {
width:64px;
height64px;
background: url(assets/img/snicons/fbwhitebig.png) no-repeat;
}
Sorry if this is a ridiculous post, I'm still learning haha!
Thanks :)
If you fix the typos (the missing opening quote after href= and missing colon after height), and add display: block the code you wrote works fine.
http://jsfiddle.net/oudL3ovz/1/
.facebookbutton {
width:64px;
height:64px;
background: url("http://s10.postimg.org/l40wid7mt/facebook_logo_64px.png") no-repeat;
display:block;
}
HTML
<div class="span2">
</div>
You may want to use display: inline-block;.
I have a forum # http://forum.banaisbul.com
If you check the site you can see there's a problem with the header background. I want to change the entire header background to the color of the logo background. But I don't know which codes to put where.
Matthew Rath gave you the correct answer to the problem that you wrote. But the bigger problem that you have revealed is that you do not know how to use your resources. Take some time and learn to use your web developer tools (web inspector, etc). Then you can solve these issues quickly by yourself.
It's #404040 - Tested in Photoshop:
HTML:
<div style="background-color: #404040;">
<a href="http://forum.banaisbul.com">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</a>
</div>
Photoshop Image:
From the looks of it you can simply add some CSS to the div that contains the header image.
<div class="imgheader">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
Then in your CSS file out could do
.imgHeader{
background-color: #3D3D3D;
}
Alternatively,
<div style="background-color: #3D3D3D">
</div>
The hardest part will likely be matching the CSS color hex code (e.g. #3D3D3D) to your image. You may want to look here to try to get an exact match : Paletton.com
You need to style the container div which currently has no selector assigned to it:
http://puu.sh/blDRr.png
This being the case you could do:
.cnt-container > div {
background-color: "your colour"
}
you could also add it directly in your page-template (this is called 'inline styling'):
a couple of lines below your opening body tag you'll find
<div>
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
and you need to change it to
<div style="background-color:#404040">
<img src="http://forum.banaisbul.com/wp-content/uploads/2014/09/banaisbulsiyah.jpg" border="0" alt="Link to this page">
</div>
I'm having a little trouble with a button I'm making as part of a SharePoint site. It currently appears like this http://imgur.com/n9M6ffX
I would like to edit my code so the grey border does not appear around the blue image but I've had no luck getting anything to work. My current code is pretty simple and can be found below:
<button onclick="HideShow()" type="button">
<img src="Training%20Libraries.png" style="width: 117px; height: 33px;"/>
</button>
Use
border: none;
for the button
I have 3 links that represent the content for one iFrame in my page. When you click each link, it'll reload the contents of that iFrame without reloading the page.
how do i set the image of my link to change when it's active?
here's my code:
<div id="tabs">
<div id="overview">
<a id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
<div id="tabs-1">
<!--<div id="scroller">-->
<iframe name= "tabsa" width="95%" height="100%" frameborder="0"></iframe>
</div>
CSS code:
#gallery a {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/GalleryTab.png) no-repeat;
height: 51px; width: 123px; position: absolute; z-index: 2;
}
#gallery a:active, a:hover {
text-indent: -9999px;
padding-top: 40px;
background: url(../images/galleryoverview.png) no-repeat;
height: 51px;
width: 123px;
position: absolute;
z-index: 2;
}
it doesn't seem to work.. :o i only see the change in image when i hold the mouse down on the link, but when i click it, the image remains the same as if it wasn't the active tab. :o thanks!!
I am not seeing a style for visited? Only active and hover.
add
#gallery a:visited{}
style and see if that helps.
But I wonder if that is what you are actually asking? You may want to link to be displayed differently from the other links if its the last link that the user clicked. To do that you may have to use some javascript.
For example, if you use jQuery you can do something like this:
$("#gallery a").click(function(){
$("#gallery a").removeClass("ActiveClass");
$(this).addClass("ActiveClass");
});
where ActiveClass is a CSS class for styling the link appropriately.
EDIT based on comment below.
Let us assume that you have three links that look the same (call that lookA). You click on one and it looks different from the other two (lookB) but the other two still looks the same (lookA). You then click on a second link. The second link is not lookB and the other two links are lookA. Does this sound like what you want? At least that is how I interpret your question.
Hence, create two classes in CSS:
.lookA {/*Style for lookA*/}
.lookB {/*Style for lookB*/}
of course you can use more meaningful names.
Then you can add a class to each of the links that you need to use in this scenario like this:
<div id="tabs">
<div id="overview">
<a class="imagelink lookA" id="overviewtab" target="tabsa" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
<a class="imagelink lookA" target="tabsa" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
<a class="imagelink lookA" target="tabsa" href="trframe.html">Reviews</a>
</div>
</div>
So that each link can be refered to by its class, that is, imagelink. Also each link has a default lookA.
Now in jQuery (I know you did not specify jQuery but using it is 100 times simpler than plain Javascript).:
$(document).ready(function(){
$(".imagelink").click(function(){
$(".imagelink").removeClass("lookB");
$(this).addClass("lookB");
return true;
});
});
So on click on the link, it removes lookB from any other link and applies it only to the clicked link.
Hope this helps a bit.
I believe the selector is:
#gallery a:focus {...}
This is (inevitably) applied variably across browsers, however.
Stu Nicholls has a demo over on CSS Play, this demo being to remove the default outline of the focussed element, and otherwise style the clicked element.
Presumably this would be more reliably effected with jQuery, but it can be done with CSS.