HTML Tutorial - Website Designing Image Mapping

படுகை.காம் சம்பந்தமான எந்தவொரு சந்தேகக் கேள்விக்கும், அல்லது தேவைப்படும் உதவியை கேளுங்கள் பதில் சொல்லி வழிநடத்த காத்திருக்கிறோம்.
Post Reply
User avatar
ஆதித்தன்
Site Admin
Posts: 12035
Joined: Sun Mar 04, 2012 1:17 am
Cash on hand: Locked

HTML Tutorial - Website Designing Image Mapping

Post by ஆதித்தன் » Tue Oct 23, 2012 11:17 am

Image Button : பார்ம் சப்மிட் பட்டன் உபயோகப்படுத்தும் பொழுது, அதனை ஒர் அழகான இமேஜ் மூலம் பயன்படுத்த உதவுவதுதான் image button code.

Example Code:
<form name="regist" action="register.php(script url)" method="POST">
<div align="center"> Name:<input type="text" size="25" name="name"><br>
<input type="image" src="Image URL" name="image" width="40" height="40">
</div>
</form>


Attributes:

This style of buttons can be used along with the following attributes to submit a form.

name - defines an internal name to the button.

type - defines the input type(text,image,etc,.)

src - defines the URL of the image.

width - defines the width of the image.

height - defines the height of the image.

It also supports other attributes like align, vspace, hspace etc.
User avatar
ஆதித்தன்
Site Admin
Posts: 12035
Joined: Sun Mar 04, 2012 1:17 am
Cash on hand: Locked

Re: HTML Tutorial - Website Designing இன் தமிழ்

Post by ஆதித்தன் » Tue Oct 23, 2012 12:34 pm

Image Mapping:

இதுவரையிலும் ஒர் இமேஜைக் கொண்டு ஒர் லிங்க் உருவாக்கினோம். இப்பொழுது map & area tag மூலம் ஒர் படத்தில் இரண்டு மூன்று அல்லது அதற்கும் மேற்ப்பட்ட லிங்குகளை ஏற்படுத்துவது எப்படி என்று பார்க்கப் போகிறோம். நாம் பள்ளியில் வரைபடத்தில் குறுக்கும் நெடுக்குமாக கோடிட்டு.. 1 சி.எம் = 5 என அளவுகள் டிக்ளர் செய்து, (X,Y) எனக் கொடுக்கப்பட்டிருக்கும் அளவுகளை மேப்பில் புள்ளியிட்டு வரைவோம் அல்லவா! அதைப்போல், இங்கு படத்தின் அளவினைக் கொண்டு x அச்சு, y அச்சு மதிப்புகளைக் கொடுத்தால், அந்தப் புள்ளிக்கு அருகே மவூஸ் பாயிண்டைக் கொண்டு செல்லவும் லிங்க் ஆக மாறிவிடும். இப்படி படத்தின் மூன்று நான்கு புள்ளிகளைக் கூட குறித்து லிங்க் ஆக மாற்றலாம். எடுத்துக்காட்டாக ஒர் போட்டோவில், அண்ணன், தம்பி,அக்கா,அம்மா ஆகியோர் இருக்கிறார்கள் என்றால், ஒவ்வொருவர் மீதும் ஒவ்வொரு லிங்கை உருவாக்கி, அதனை கிளிக் செய்து அவர்களைப் பற்றிய விவரம் உள்ள பக்கத்திற்கு செல்லுமாறு ஏற்படுத்தலாம். ஆக, ஒர் ஆர்ட்டிகளில் முக்கிய வார்த்தைகளை லிங்க் ஆக மாற்றுவது போல், இப்பொழுது படத்திலும் முக்கிய இடத்தினை லிங்காக மாற்றி மேல் விவரப் பக்கத்திற்கு அனுப்புகிறோம்.

கோடிங்கில் கவனிக்க வேண்டியது img tag உள்ளே attribute ஆக usemap வந்திருப்பதனையும், அதன் மதிப்பான imgmap என்பது அடுத்து வரும் map டேக் உள்ளே name=ன் மதிப்பாக அமைந்திருப்பதனையும். மேலும், எந்த இடத்தில் லிங்க் அமைய வேண்டும் என்பதனை area & shape என்பதன் மூலம் உருவாக்கியிருக்கிறார்கள்.

Example Code:

<img src="image URL" usemap = #imgmap border=0>
<map name=imgmap>
<area shape=Rect Coords=30,30,59,59 href="Link URL" Target="_blank">
<area shape=Rect Coords=100,60,129,80 href="Link URL" Target="_blank" >
</map>



shape ரெக்ட் ஆங்கிள் மட்டும் அல்லாது, சர்கிள், பாலிகோன் ஆகவும் இருக்கலாம்.


<area shape=rect coords= x1,y1, x2,y2 Href="http://www.google.com">
<area shape=circle coords= x1,y1, x2,y2 Href="http://www.onlinejob.com">
<area shape=polygon coords= x1,y1, x2,y2 Href="http://www.htmltutorial.com">


இதனைச் செய்து பார்த்துவிட்டு விவரமாக சந்தேகத்தினைக் கேட்டால், சொல்லிக் கொடுக்க காத்திருக்கிறேன்.


தொடரும்...
kumarsvm
Posts: 85
Joined: Wed Apr 06, 2016 9:51 am
Cash on hand: Locked

Re: HTML Tutorial - Website Designing Image Mapping

Post by kumarsvm » Sun Apr 10, 2016 11:32 am

One by one I am now following.I came Padugai for earning.But so many topics will give me boost LEARN then EARN.On the way both.
Post Reply

Return to “உதவிக் களம்”