I have a logo in a div and would like to have it link to a home page on click. From my quick search it looks like this could easily be done with css stylesheets. Any other quick way to do it with javascript or jquery or something??
You can't do this with CSS.
You need to use actual markup for the link, and using Javascript with onClick and window.location would just be stupid.
<a href="http://www.myhomepage.com" title="CLick to go to Home">
<img src="/images/logo.png" height=64 width=32 alt="logo" />
</a>
just wrap the image file in an anchor tag? If you are not using an image tag to display the logo, you can use javascript/jquery to leverage the click event of the div to navigate to the link.
Use this:
onClick="parent.location='page.html'
Related
I have a button in React which when clicked scrolls the page to the desired location, which is working.
<div className={styles.classB}>
<Button onClick={ScreenMover.MoveToElem} > Extras </Button>
</div>
But I wanted the same onClick feature without a button, say a link and when clicking it should do the same operation. So I have used the below Link button, but it is not taking the onClick instead it goes to the page top based on the to="" attribute.
<div className={styles.classL}>
<Link className={styles.linkButton} onClick={ScreenMover.MoveToElem} to=""> Extras </Link>
</div>
Another thought, if we can not achieve the above one, then can we have a button look like a link by applying some css style to the button? I should be able to override the inherited button styles and instead it should take the link look and feel. Is it possible and can we have a sample css class for it?
Thanks in advance.
The Link object is important for you?
If not you can use a simple <p> tag and the onClick event will working perfectly.
<p className={styles.linkButton} onClick={ScreenMover.MoveToElem}> Extras </p>
Tell me how to add href to a link via CSS. How to do it in the standard way is clear.
<div>
Button
</div>
But I need pure HTML. And in CSS, specify which address to make the transition to.
<div>
<a class="button-click"></a>
</div>
.button-click a {href:"https://example.com"}
How do I specify a path in CSS?
CSS cannot be used to perform action or make changes to DOM. Its used for presentation purpose.
You can use script to do the manipulation not css.
Live example - http://sofactor.com/ when you click on "Services" it will take you to the bottom of the page. The rest of my anchors are set up the same and work, but my Services anchor doesn't... Any ideas?
Your page is functionally correct. Your button is what your download link is directing to
<div id="services" <a href="#" class="button">Download</div>
Just simply remove the id="services" and put it on your h3 where I believe you want it to be
I have a portfolio that works fine but I'm currently building a CMS for it so that I can simply upload the image and it adds it to the site for me. Before I build it, I'm rebuilding some of the scrappy code and converting the what was a JS powered gallery to a CSS powered one.
I'm trying to achieve this click effect in CSS. http://www.tomdwyerdesign.com/graphics/
I thought I could do it via the :focus selector but I've run into a little problem.
This is the HTML:
<a class="tile" href="#">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
and this is the CSS:
.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}
It doesn't seem to select it properly. Any one know why?
Thanks.
The problem is that a link is not necessarily focused when it's clicked, it's focused when you navigate to it. You can do this with the keyboard, or you could add a click handler to the link. Of course at that point, you're back into javascript, but it shows what's happening.
E.g.
<a class="tile" href="#" onclick="this.focus()">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Luckily, there is a better solution, and one that doesn't require javascript. If you add a tabindex to the link, clicking it will focus it even if the href is going nowhere. So...
<a class="tile" href="#" tabindex="0">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Should do what you want.
(your next problem is going to be that the background-image won't be visible in front of the src image - you're just going to get a stretched version of the thumbnail. But I think that's a different question)
:focus is only available on elements that receive keyboard input (i.e. form elements). You could try :active but it will only apply the CSS while the mouse button is down.
I have a DIV tag. Inside the DIV, I have a Table and in a row, I have placed a script code which displays random images which on a click leads to a url.
This is how the script renders inside the Div Tag
<div>
<table>
<tr>
<td>
<script />
<a href="some random url">
<img></img>
</a>
...
When the user hovers over these images, the anchor url shows as a message on browser status bar. This is very misleading for users. I want to know how to use CSS to hide this status message - Cross Browser and display a custom message instead. On the Div, I have given onmouseout and onmouseover, however it does not help.
Can this be done?
See https://developer.mozilla.org/en/DOM/window.status :
This property does not work in default configuration of Firefox and some other browsers: setting window.status has no effect on the text displayed in the status bar. To allow scripts change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.
This is a security feature that you can't realistically bypass.
common users dont know that they should look at that place in the browser window.
but you can hide that message... you can maybe just redirect with javascript
something like this:
<a href="javascript:void(0);" onclick="someredirectfunction('someurl');return false;" >
<img />
</a>
onmouseout and onmouse over are used for events for client side scripting. Those are used "mostly" for a language called ecmascript(javascript). You unfortunately will not be able to do what you are asking with CSS, css is desinged to represent the appearance of a site, HTML the form, and javascript (other scripting sources) the function.