0
織り：http://kodeweave.sourceforge.net/editor/#3d4399e2bde4c474186bd1c730539334ホバー以上の文字列とアップデートプレビュー
私はこの質問はちょうど約ある、ここで二つの文字列（イメージや色）
<div class="stuff">
#0af
http://cdn1.theodysseyonline.com/files/2015/11/14/6358312506953272101532239493_l-Baby-bear.jpg
</div>
Color values and images change depending on user input.
で働いています画像を表示する。 I already got color values workingとして。私は、文字列がイメージを持っているかどうかを確認するには、以下の正規表現を使用してい
...
var image = /(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)/g;
私がされて把握したいのですがどう...
- 私は上にマウスを移動した場合イメージにリンクするURL RegExを使用して
.preview（イメージタグとして）にそのイメージを表示するにはどうすればいいですか？
// Handles Preview Position
$(document).on('ready mousemove', function(e) {
if (e.pageX >= $(window).width() - 100) {
if (e.pageY <= $(window).height() - 100) {
$('.preview').css({
'top' : e.pageY,
'left' : e.pageX - 134
})
} else {
$('.preview').css({
'top' : e.pageY - 100,
'left' : e.pageX - 134
})
}
} else if (e.pageX >= 60) {
if (e.pageY <= $(window).height() - 100) {
$('.preview').css({
'top' : e.pageY,
'left' : e.pageX - 64
})
} else {
$('.preview').css({
'top' : e.pageY - 100,
'left' : e.pageX - 64
})
}
} else if (e.pageX <= 60) {
if (e.pageY <= $(window).height() - 100) {
$('.preview').css({
'top' : e.pageY,
'left' : e.pageX
})
} else {
$('.preview').css({
'top' : e.pageY - 100,
'left' : e.pageX
})
}
}
})
// Add Preview
$('body').append('<div class="preview"></div>');
// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/css",
tabMode: "indent",
styleActiveLine: true,
lineNumbers: true,
lineWrapping: true,
autoCloseTags: true,
foldGutter: true,
dragDrop: true,
lint: true,
gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"]
})
$('.CodeMirror-line').on('mouseover', function() {
var hsl = /hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g;
var rgb = /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)/g;
var hex = /#[a-fA-F0-9]{3,6}/g;
var colors = /hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)|rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)|#[a-fA-F0-9]{3,6}/g;
var image = /(http(s?):)|([/|.|\w|\s])*\.(?:jpg|gif|png)/g;
if (!this.textContent.match(colors) == "") {
\t $('.preview').css('visibility', 'visible');
\t $('.preview').empty().html($('<div/>').addClass('color').css('background', this.textContent.match(colors)))
} else if (!this.textContent.match(image) == "") {
\t $('.preview').css('visibility', 'visible');
\t $('.preview').empty().html('<img src="'+ this.textContent.match(image) + '">')
} else {
$('.preview').empty().css('visibility', 'hidden');
}
}).CodeMirror {
float: left;
width: 100%;
height: auto;
}
.preview {
position: absolute;
margin: 6px;
background: #fff;
border: 1px solid #000;
border-radius: 5px;
padding: 6px;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.72);
z-index: 9999;
visibility: hidden;
}
.color {
width: 80px;
}
.preview img, .color {
height: 80px;
}<link rel="stylesheet" href="https://necolas.github.io/normalize.css/4.0.0/normalize.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/addon/fold/foldgutter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/addon/edit/closetag.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/selection/active-line.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/addon/fold/comment-fold.js"></script>
<textarea id="code">.CodeMirror {
float: left;
width: 50%;
border: 1px solid #2e8f2e;
background: url('http://cdn1.theodysseyonline.com/files/2015/11/14/6358312506953272101532239493_l-Baby-bear.jpg');
}
iframe {
width: 49%;
float: left;
height: 300px;
color: hsl(232,100%,46%);
border: 1px solid rgb(191, 92, 209);
border-left: 0;
}</textarea>
：色ならば、検索div.stuffを画像リンクが 'でラップされていることが判明した場合、' 'でラップを見つけました。 –
"ユーザーの入力によって色の値と画像が変わります。" ...どのようなコードがこれらの変更を引き起こしているのか、何とか使用できるのでしょうか？ （イベントまたはvar） – yezzz
"ユーザーの入力によって色の値と画像が変わります。"私は[Codemirror]（http://kodeweave.sourceforge.net/editor/#b010fdda3961f2841274656a6e402beb）と一緒に作業しているからです。 –