Yes this is possible
you can use an elemnent such as a div instead of the ‘link text’ with a unique id and target that with CSS to set it to a fixed size. Also define a default background image in the CSS and an alternative alternative background image for the hover state.
Thank you, that is pretty much exactly what I tried to do, but would never work. Kept opening up a new window that was blank.
post the code you used – ie the markup you included with the shortcode and the css? Also add it to your site & post a link to the page so i can see what happens.
a.quiz {
display: block;
cursor: default;
width: 350px;
height: 70px;
background: url('http://optionstrategiesinsider.com/images/orderbutton1.png') top left;
}
a.quiz:hover {
display: block;
cursor: default;
width: 350px;
height: 70px;
background: url('http://optionstrategiesinsider.com/images/orderbutton2.png') top left;
}
a.quiz:active {
display: block;
cursor: default;
width: 350px;
height: 70px;
background: url('http://optionstrategiesinsider.com/images/orderbutton1.png') top left;
}
<div class="popup">
<a href="http://optionstrategiesinsider.com/quiz333/" class="quiz" data-height="300" data-width="300" data-scrollbars="1" ></a>
</div>
I have tried several different set ups, switching the classes, but no luck. Pretty close to giving up. Thanks for your help
Test page: http://optionstrategiesinsider.com/test-stuff/
The issue is that the popup class is not applied to the link. As you are using an html link rather that the shortcode, try this instead:
<a href="http://optionstrategiesinsider.com/quiz333/" class="popup quiz" data-height="300" data-width="300" data-scrollbars="1" ></a>
Although your CSS should still work, I would use
a.quiz {
display: block;
cursor: pointer;
width: 350px;
height: 70px;
background: url('http://optionstrategiesinsider.com/images/orderbutton1.png') top left;
}
a.quiz:hover {
background: url('http://optionstrategiesinsider.com/images/orderbutton2.png') top left;
}
a.quiz:active {
background: url('http://optionstrategiesinsider.com/images/orderbutton1.png') top left;
}
As you shouldn’t need to specify the dimensions or cursor properties for the :hover & :active states, and as it looks like the link is being presented as a button the value for the cursor should give an indication that it is clickable.
Thank you, worked perfectly!
