CODEWITHSUNDEEP
htmlcssimageformsinput
davedavedave.h
davedavedave.h

Reputation: 3

Hyperlink Input Image

I'm struggling to replicate the login form found at the top of the PayPal website.

I have been able to create the username and password fields including the 'blue glow' from searching the web for tutorials; however, I'm unable to find any coding to add the 'clickable' question mark to the field.

I would like to be able to replicate the drop down when the question mark is clicked.

Any help will be greatly appreciated.

I hope I have made it clear.

Upvotes: 0

Views: 74

Answers (2)

Devon Bernard
Devon Bernard

Reputation: 2300

What you could do is in your form have the question-mark image trigger a java-function... Ex:

<img src="my_image.jpg" onClick="myjava_function()">

Then in your java function you could have a div containing the drop-down displayed.

<script type="text/javascript">
myjava_function(){
document.getElementById('mydiv').style.display="block"
}
</script>

Then in near the form you could have your div that contains the drop down first being hidden but shown on the click.

<div id="mydiv" style="display:none;"><form><select><option value=1>1</option></select></form></div>

Upvotes: 1

AmbuSreedharan
AmbuSreedharan

Reputation: 181

This would be my approach to getting it done. Firstly, try and get a log that is similar to the question mark, and position it in the div that you would place your area at. In the CSS for the logo apply float right so that the logo would appear to the right of that div. Then build a whole div that appears when you click the log before hand and give it the CSS display none, hence it would not be shown. Write a javascript function that works with the onclick you apply on the logo that changes the CSS of that div to display block and hence the whole div appears when you click it. The div by itself has a cross mark that could trigger another javascript call to change the CSS to display none. Good luck.

Upvotes: 0

Related Questions